Boleto Bancário Drop-in integration

This page explains how to add Boleto Bancário to your existing Web Drop-in integration.

Drop-in renders Boleto Bancário in your payment form, collects the shopper details, and presents the shopper with options to download the Boleto (voucher) or copy the barcode number.

Requirements

Select which endpoint you are using:

Import resources for v6

If you are using Web Drop-in v6, import the resources you need for Boleto Bancário:

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

API reference

Select which endpoint you are using:

Drop-in configuration

Optional configuration

You can add the following optional configuration for collecting the shopper details:

• If you already have the required shopper details, you can turn off the form sections where these details are collected.
• You can pre-fill some of the fields. To collect the missing details, turn on the corresponding form sections.

Parameter name	Description	Default
personalDetailsRequired	Set to false if you have already collected the shopper's first name, last name, and CPF/CNPJ (socialSecurityNumber). The 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.	true
billingAddressRequired	Set this to false if you have already collected the shopper's street, house number or name, city, postal code, and state or province.	true
showEmailAddress	Set this to false if you have already collected the shopper's email address.	true
data	Object to pre-fill shopper details on the form: socialSecurityNumber, shopperName, billingAddress, and shopperEmail as shown in the example below.	Empty

If you want to add optional configuration, include this in a configuration object. The following example shows how to configure Drop-in to remove the shopper details fields and prefill the form.

const boletoBancarioConfiguration = {
  personalDetailsRequired: false, //turn personalDetails section on/off
  billingAddressRequired: false, // turn billingAddress section on/off
  showEmailAddress: false, // allow shopper to specify their email address

  // Optionally pre-fill some fields, here all fields are filled:
  data: {
    firstName: 'José',
    lastName: 'Silva',
    billingAddress: {
      city: 'São Paulo',
      country: `BR`
      houseNumberOrName: '952',
      postalCode: '04386040',
      stateOrProvince: 'SP',
      street: 'Rua Funcionarios',
    },
    socialSecurityNumber: '56861752509',
    shopperEmail: 'joses@test.com'
};

Include the boletoBancarioConfiguration object when creating a configuration object for Drop-in:

Pass the Drop-in configuration object when creating your instance of AdyenCheckout:

const checkout = await AdyenCheckout(configuration);

Set up webhooks

With Boleto, the shopper can pay more or less than the original amount. Set up standard webhooks to make sure that you know the amount that the shopper paid.

Test and go live

Boleto Bancário is an offline payment method.

In the test environment, you can simulate a Boleto 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 Boleto payment.
4. Select the Promote this offer to a sale button.

Check the status of Boleto Bancário test payments in your Customer Area:

• Boletos that are pending or that have expired are under Transactions > Offers.
• Boletos 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 Boleto Bancário payments, you need to submit a request for Boleto Bancário in your live Customer Area.

See also