On this page, you can find additional configuration for adding Pix to your Components integration.
Before you begin
This page assumes you have already:
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.
Select which endpoint you're integrating:
This is the default with Components v5.0.0 or later.
|amount||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.|
|lineItems.id||The name of the purchased item. Maximum 50 characters.|
|lineItems.amountIncludingTax||The price of the purchased item including tax. Maximum 200 characters.|
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:
Step 2: Create an instance of the Component
create method of your
AdyenCheckout instance, in this case
checkout, to create the Component:
const pixComponent = checkout.create('pix').mount('#pix-container');
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.
- Log in to your test Customer Area.
- Go to Transactions > Offers.
- Select the PSP reference of the pending Pix payment.
- 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.