Skip to main content

OTP Payment Verification Modal

OTP modal empty, typing, verification, request, and response state examples.

What This Example Demonstrates​

The fixture covers the short-lived verification step requested by a payment provider. It separates what the customer types, the modal's busy state, the provider request token, and the successful verification result.

How to Use It​

Keep provider tokens server-side whenever the provider contract permits it. Mask the destination shown to the customer, rate-limit attempts, and clear the entered code after success, cancellation, or expiry. Do not log the OTP or include it in ACP messages and session metadata.

{
  "description": "Extended logical payloads for the reference commerce UI. These examples can be used as mock API responses, Storybook fixtures, or frontend integration test data.",
  "otpModal": {
    "ChatOTPModalProps": {
      "isOpen": true,
      "phoneNumber": "+1******2233",
      "isVerifying": false,
      "otpCode": ""
    },
    "typingState": {
      "isOpen": true,
      "phoneNumber": "+1******2233",
      "isVerifying": false,
      "otpCode": "123456"
    },
    "verifyingState": {
      "isOpen": true,
      "phoneNumber": "+1******2233",
      "isVerifying": true,
      "otpCode": "123456"
    },
    "verifyOtpRequest": {
      "otpCode": "123456",
      "token": "{{payment_provider_token}}",
      "responseToken": "otp_response_token_example"
    },
    "verifyOtpResponse": {
      "statusCode": 200,
      "description": "OTP verified.",
      "result": {
        "token": "payment_complete_token_example"
      }
    }
  }
}