Card payment view | DEUNA Docs

On this page

Customizable areas
Configuration
Verify the result

Live CustomStyle example

Live preview

PaymentMethodsPattern

YOURSTORE

Secure checkoutCredit or debit card

CardWallet

Card number

4242 4242 4242 4242

Expiry

12 / 30

CVV

•••

Installments

3 monthly payments

Editing

PaymentMethodsPattern

Card fields, installments, and action

Card form copySection headingPayment button

Complete generated object

{
  "PaymentMethodsPattern": {
    "translations": {
      "en": {
        "inputs": {
          "card": {
            "securityCode": {
              "label": "CVV"
            },
            "installment": {
              "label": "Installments",
              "pay_by": "Pay in",
              "first_pay": "First payment",
              "without_interest": "No interest",
              "without_installments": "Without installments",
              "loading": "Validating installments…"
            },
            "cardHolder": {
              "label": "Name on card",
              "placeholder": "e.g. Alex Rivera"
            },
            "cardNumber": {
              "label": "Card number",
              "placeholder": "0000 0000 0000 0000"
            },
            "expirationDate": {
              "label": "Expiration date",
              "placeholder": "MM / YY"
            }
          }
        },
        "paymentMethods": {
          "info": {
            "card": {
              "title": "Credit or debit card",
              "subtitle": "Enter your card details"
            }
          }
        }
      }
    },
    "props": {
      "hideTitleForCreditCard": false
    }
  },
  "PaymentButtonPattern": {
    "label": "Pay now",
    "showOrderTotal": true
  }
}

The card payment view is the main form where a customer enters card details and selects available installment options.

Customizable areas#

PaymentMethodsPattern controls section titles, field labels and placeholders, installment copy, and whether the credit-card heading appears. Use the related patterns for the payment button, informational notices, and legal links.

Configuration#

JSON

{
  "PaymentMethodsPattern": {
    "translations": {
      "es": {
        "inputs": {
          "card": {
            "securityCode": {
              "label": "CVV"
            },
            "installment": {
              "label": "Cuotas",
              "pay_by": "Paga en",
              "first_pay": "Primer pago",
              "without_interest": "Sin interés",
              "without_installments": "Sin cuotas",
              "loading": "Validando cuotas..."
            },
            "cardHolder": {
              "label": "Nombre como aparece en la tarjeta",
              "placeholder": "Ej. Juan Zapata"
            },
            "cardNumber": {
              "label": "Número de tarjeta",
              "placeholder": "0000 0000 0000 0000"
            },
            "expirationDate": {
              "label": "Fecha de expiración",
              "placeholder": "MM / YY"
            }
          }
        },
        "paymentMethods": {
          "info": {
            "card": {
              "title": "Tarjeta de crédito o débito",
              "subtitle": "Ingresa los datos de tu tarjeta"
            }
          }
        }
      },
      "en": {},
      "pt": {}
    },
    "props": {
      "hideTitleForCreditCard": true
    }
  }
}

Card payment view after CustomStyle overrides

Verify the result#

Test empty, focused, valid, invalid, disabled, and loading states. Confirm that installment copy reflects the available plan and that payment-button and legal text remain visible at mobile widths.