Skip to main content

Card List and Payment Modal

Card listing and payment modal state example.

What This Example Demonstrates​

This fixture models a wallet response, a selected card, and the payment modal state. The UI receives only aliases, masked card numbers, card type, and expiry information required for customer selection.

How to Use It​

Use a provider-owned card reference or alias when starting payment. Never replace the masked values in this fixture with a primary account number or security code. The backend should validate that the selected payment method belongs to the authenticated customer before creating a payment request.

{
  "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.",
  "cardListingAndPayment": {
    "payment_providerCardsApiResponse": {
      "success": true,
      "cards": [
        {
          "cardAlias": "Personal payment card",
          "maskedCardNumber": "5456********4242",
          "cardHolderName": "EXAMPLE USER",
          "cardType": "credit_card",
          "expiryDate": "12/29"
        },
        {
          "cardAlias": "Business Card",
          "maskedCardNumber": "5168********1111",
          "cardHolderName": "EXAMPLE USER",
          "cardType": "credit_card",
          "expiryDate": "08/28"
        }
      ]
    },
    "CardListProps": {
      "cards": [
        {
          "cardAlias": "Personal payment card",
          "maskedCardNumber": "5456********4242",
          "cardHolderName": "EXAMPLE USER",
          "cardType": "credit_card",
          "expiryDate": "12/29"
        }
      ]
    },
    "PaymentModalProps": {
      "isOpen": true,
      "totalAmount": "$129.90",
      "cards": [
        {
          "cardAlias": "Personal payment card",
          "maskedCardNumber": "5456********4242",
          "cardHolderName": "EXAMPLE USER",
          "cardType": "credit_card",
          "expiryDate": "12/29"
        },
        {
          "cardAlias": "Business Card",
          "maskedCardNumber": "5168********1111",
          "cardHolderName": "EXAMPLE USER",
          "cardType": "credit_card",
          "expiryDate": "08/28"
        }
      ],
      "selectedCard": {
        "cardAlias": "Personal payment card",
        "maskedCardNumber": "5456********4242",
        "cardHolderName": "EXAMPLE USER",
        "cardType": "credit_card",
        "expiryDate": "12/29"
      }
    },
    "cardSelectedEvent": {
      "type": "PAYMENT_CARD_SELECTED",
      "cardAlias": "Personal payment card",
      "maskedCardNumber": "5456********4242"
    }
  }
}