Pix Component

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.

Requirements

Select the server-side flow that your integration uses:

Import resources for v6

If you are using Web Components v6, import the Component that you need for Pix:

import { AdyenCheckout, Pix } from '@adyen/adyen-web'

Collect additional parameters in your payment form

Collect the following details from the shopper:

• Name: The first and last name of the shopper.
• CPF/CNPJ: CPF/CNPJ is a unique identifier similar to a social security number. The shopper can provide their Cadastro de Pessoas Físicas (CPF) number or their Cadastro Nacional da Pessoa Jurídica (CNPJ) number.

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 are using:

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

v6.0.0 or later

Create an instance of the Component, passing:

• Your instance of AdyenCheckout.

const pix = new Pix(checkout).mount('#pix-container');

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:

For example:

Refunds

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.