Primer Docs

Before you start

This guide assumes that you know how to

Show Drop-in Checkout

Accept payments with Pix via Volt

Prepare the client session

Pix via Volt 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
currencyCode		3-letter currency code in ISO 4217 format, e.g. `USD` for US dollars
order ↳ lineItems		Details of the line items of the order
customerId		`customerId` is mandatory, and will be passed to Volt as `payer` -> `reference`.
customer ↳ nationalDocumentId		A Brazilian document ID is required, and will be passed to Volt as `payer` -> `documentId`
orderId		`orderId` is required, it must be unique and will be passed to Volt as `uniqueReference`
customer ↳ billingAddress ↳ firstName		`firstName` will be used in `payer` -> `name` in the request to Volt
customer ↳ billingAddress ↳ lastName		`lastName` will be used in `payer` -> `name` in the request to Volt

Prepare the SDK for payments

Web iOS

Show Universal Checkout

Pix via Volt is automatically presented to the customer when calling Primer.showUniversalCheckout.

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

typescript

copy

Customization

Check the customization guide to learn how to customize payment method buttons.

123456789101112131415const options = {  /* Other options ... */  style: {    paymentMethodButton: {      background: string,      borderRadius: number | string,      boxShadow: string,      borderColor: string,      height: number,      primaryText: TextStyle,      logoColor: logoColor,      marginTop: string,    },  },}

typescript

copy

Go live

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