Skip to main content

Payment Confirmation Flow

Payment request, OTP-required response, completed response, and success message.

What This Example Demonstrates​

The fixture models an asynchronous payment journey in which the provider may require an OTP before returning a completed payment. The request uses customer and checkout references rather than raw card data, and each provider response advances the UI to a specific state.

How to Use It​

Create requestReferenceNo once and reuse it for safe retries according to the provider contract. Show the success message only after the provider returns the completed result. Store the provider correlation ID for support and reconciliation without exposing it as customer authentication material.

{
  "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.",
  "paymentConfirmation": {
    "paymentRequest": {
      "provider": "payment_provider",
      "accountKey": "customer_ref_42",
      "authenticationMethod": "OTP",
      "amountMinor": "12990",
      "currency": "USD",
      "requestReferenceNo": "pay_req_20260611_0001",
      "cardAlias": "Personal payment card",
      "orderNo": "ord_pending_20260611_0001",
      "checkout": {
        "id": "chk_1234567890abcdef12345678"
      }
    },
    "paymentRequiresOtpResponse": {
      "statusCode": 202,
      "description": "OTP verification required.",
      "token": "otp_response_token_example",
      "correlationId": "mp_corr_01HX7PAY"
    },
    "paymentCompletedResponse": {
      "statusCode": 200,
      "description": "Payment completed.",
      "result": {
        "payment": {
          "id": "pay_01HX7Y0D5V",
          "status": "paid"
        },
        "orderNo": "ord_pending_20260611_0001",
        "authCode": "123456",
        "retrievalReferenceNumber": "000000123456"
      }
    },
    "chatSuccessMessage": {
      "id": "msg_payment_success_001",
      "role": "assistant",
      "content": "Payment completed successfully.",
      "showActions": true,
      "actionType": "order_summary"
    }
  }
}