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 NameRequiredDescription
3-letter currency code in ISO 4217 format, e.g. USD for US dollars
  1. order
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.

try {  await Primer.showUniversalCheckout(clientToken, {    container: '#checkout-container',    options,    onCheckoutComplete({ payment }) {      console.log('Checkout complete.', payment)    },  })} catch (e) {  // handle error}


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.


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.

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.

const options = {  /* Other options ... */  card: {    cardNumber: {            placeholder: "Custom placeholder,        },        expiryDate: {            placeholder: "Custom placeholder,        },        cvv: {            placeholder: "Custom placeholder,        },  }}

Go live

You don’t need to do anything particular to go live — just make sure to use production credentials.