Primer's drop-in checkout automatically renders a card form to capture the card number, the expiry date, the CVV, and the cardholder name.
This form captures cardholder name data regardless of the processor used to authorize and capture the payment.
Before you start
This guide assumes that you know how to
Accept payments with Card
Prepare the client session
Card requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).
| Parameter Name | Required | Description |
|---|---|---|
3-letter currency code in ISO 4217 format, e.g. USD for US dollars | ||
| Details of the line items of the order |
Prepare the SDK for payments
Show Universal Checkout
Card is automatically presented to the customer when calling Primer.showUniversalCheckout.
1234567891011
try { await Primer.showUniversalCheckout(clientToken, { container: '#checkout-container', options, onCheckoutComplete({ payment }) { console.log('Checkout complete.', payment) }, })} catch (e) { // handle error}
Customization
Show a "Pay by card" button instead of the form
By default, the card form is automatically displayed on the first scene.
You can replace it by a "Pay by card" button. Clicking on it will show the card form on another scene.
123456
const options = { /* Other options ... */ card: { preferredFlow: 'DEDICATED_SCENE' // Show the card form on a separate scene }}
card.preferredFlow can be DEDICATED_SCENE or EMBEDDED_IN_HOME.
Check the customization guide to learn how to customize payment method buttons.
123456789101112131415
const options = { /* Other options ... */ style: { paymentMethodButton: { background: string, borderRadius: number | string, boxShadow: string, borderColor: string, height: number, primaryText: TextStyle, logoColor: logoColor, marginTop: string, }, },}
Change input placeholders
You can change the placeholders of the card number, expiry date and cvv field.
1234567891011121314
const options = { /* Other options ... */ card: { cardNumber: { placeholder: "Custom placeholder, }, expiryDate: { placeholder: "Custom placeholder, }, cvv: { placeholder: "Custom placeholder, }, }}
Filter card networks
By default, the drop-in checkout allows the user to pay with any card networks.
Pass orderedAllowedCardNetworks in the client session to specify which card networks the user is allowed to pay with:
123456
// POST /client-session{ "paymentMethod": { "orderedAllowedCardNetworks": ["VISA", "CARTES_BANCAIRES", "MASTERCARD"] }}
Learn more about orderedAllowedCardNetworks in the API Reference.
Hide the cardholder name field
By default, the card form asks the user to enter the cardholder name.
This field can be hidden by setting the option card.cardholderName.visible to false:
123456789
await Primer.showUniversalCheckout({ // ... other options card: { cardholderName: { visible: false, } }})
Some processors such as Adyen have low authorization rate when the cardholder name is not captured.
We encourage you to check the expectations of your processor before going live.
Go live
You don’t need to do anything particular to go live — just make sure to use production credentials.