Payment Credit Card Form Reference

Description

Displays a credit card form to allow customers to complete payments on checkout pages.

{{ paymentForm(array options, object paymentMethod, array attributes) }}

pay

{{ paymentForm({}, paymentMethod) }}

pay, with options and paymentMethod

{{ paymentForm({
        options: {
            number:{
                label: '',
                placeholder: 'Card Number',
                style: "font-family: Verdana; letter-spacing: 1px; font-weight: bold; font-size: 15px; color: #8d8d8d; padding: 15px 19px 15px 0px; width: 91%;"
            },
            cvv: {
                label: '',
                placeholder: 'CVV',
                style: "font-family: Verdana; letter-spacing: 1px; font-weight: bold; font-size: 15px; color: #8d8d8d; padding: 15px 19px 15px 0px; width: 91%;"
            },
            full_name: {
                label:''
            },
            expiry: {
                label:''
            },
            submit: {
                label: '',
                value: 'Pay Now'
            },
            save_card: {
                label: 'Save Card',
                enabled: saved_card_enabled
            }
        }
    },
    paymentMethod
) }}

Configuration Fields

Variable Usage
options.number Configuration for the form's number field.
number: {
    label: 'Card Number',
    class: 'another-card-number-class',
    placeholder: 'Card number',
    style:'font-family: arial;'
}
options.number.placeholder Placeholder configuration for the form's number field.
number: {
     placeholder: 'Credit Card Number'
}
options.number.style Inline style configuration for the form's number field.
number: {
    style: 'font-family: Courier New;'
 }
options.cvv Configuration for the form's cvv field.
cvv: {
    label: 'CVV',
    placeholder: 'XXX',
    style:'font-family: arial;'
}
options.cvv.placeholder Placeholder configuration for the form's cvv field.
cvv: {
     placeholder: '***'
}
options.cvv.style Inline style configuration for the form's cvv field.
cvv: {
    style: 'font-family: Courier New;'
 }
options.full_name Configuration for the form's full_name field.
full_name: {
    label: 'Full Name',
    placeholder: 'Cardholder name'
}
options.full_name.placeholder Placeholder configuration for the form's full_name field.
full_name: {
     placeholder: 'John Q. Public'
}
options.expiry Configuration for the form's expiry field.
expiry: {
    label: 'Expiration Date',
    placeholder: 'MM/YYY'
}
options.expiry.placeholder Placeholder configuration for the form's expiry field.
expiry: {
     placeholder: 'MM/YYYY'
}
options.submit Configuration for the form's submit button.
submit: {
    ​class: 'big-btn',
    value: 'Update a card'
}
options.save_card Configuration for the form's save_card button (for premium customers, only).
save_card: {
    label: 'Save Card',
    enabled: saved_card_enable  
}
options.<field>.label Configuration for a field's label.
full_name: {
    label: 'Full Name'
 }
options.<field>.class Associates a field with a string of CSS classes.
submit: {
    class: 'big-btn'
 }