Customization

Customizing the Payment Form

The payment form can be customized. This allows you to modify the form's appearance and translation.

// let's find a payment method
const allMethods = checkout.paymentMethods.value
const method = allMethods.find((method) => method.method === "creditcard");

if (!method) {
    console.error("Payment method not found");
    return;
}

const paymentElement = method.getPaymentElement({
    hostedForm: {
        //Define the translation for the credit card forms
        panInputLabel: "Card number",
        cvvInputLabel: "Security code"
    },
    theme: {
        colors: {
            'surface-primary': '#ffffff'
        },
        typography: {
            'font-family': 'Arial, sans-serif'
        }
    }
})
paymentElement.appendTo("a-container");