Payment-method icon

Pix Component

Add Pix to an existing Components integration.

When a shopper is ready to pay with Pix on your website:

  1. The shopper chooses to pay with Pix on your website.
  2. Your website shows a QR code or QR code data for the shopper to copy.
  3. The shopper opens their banking or wallet app participating in Pix.
  4. The shopper selects Pix, scans the QR code or pastes QR code data, and then confirms the payment.

This page explains how to add Pix to your existing Web Components integration to make the use of QR code payments possible.

Before you begin

Before starting your Pix integration:

  1. Make sure that you have done the Components integration for Web.
  2. Add Pix in your test Customer Area.

Collect additional parameters in your payment form

Collect the following details from the shopper:

Pass the collected data to your server because you will need to submit both Name and CPF/CNPJ in the /payments request. This information will be shown to the shopper to help identify the payment.

API reference

Select which endpoint you're integrating:

This is the default with Components v5.0.0 or later.

Parameter Required Description
amount -white_check_mark- The final price of the purchase.
shopperName Shopper's first name and last name.
socialSecurityNumber The shopper's CPF or CNPJ number. This will be shown to the shopper on the Pix payment form.
shopperStatement Free-text field that will be shown to the shopper. Maximum length: 140 characters. The name of the purchased item. Maximum 50 characters.
lineItems.amountIncludingTax The price of the purchased item including tax. Maximum 200 characters.

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="pix-container"></div>

Step 2: Create an instance of the Component

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const pixComponent = checkout.create('pix').mount('#pix-container');

Optional configuration

This corresponds to the Create a configuration object step of the Components integration guide.

You can optionally configure the following:

Parameter Description Default value
countdownTime The number of minutes after the QR code loads that the shopper must complete the payment. 15
personalDetailsRequired Set to true to require the shopper's personal details. false

For example:


You can refund a payment within 90 days after the payment in the Customer Area or using an API.

Test and go live

Pix is an asynchronous payment method. In the test environment, you can simulate a Pix payment by promoting the pending payment to a sale.

  1. Log in to your test Customer Area.
  2. Go to Transactions > Offers.
  3. Select the PSP reference of the pending Pix payment.
  4. Select the Promote this offer to a sale button.

Pix payments that have been paid (including test offers that you manually promoted to sale) are under Transactions > Payments.

Test the reconciliation process by promoting test payments from offer to sale in your test Customer Area.

Before you can accept live Pix payments, you need to submit a request for Pix in your live Customer Area.