---
title: "Boleto Bancário Web Component"
description: "Add Boleto Bancário to your Components integration."
url: "https://docs.adyen.com/payment-methods/boleto-bancario/web-component"
source_url: "https://docs.adyen.com/payment-methods/boleto-bancario/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/boleto-bancario/web-component"
last_modified: "2026-06-01T15:33:15+02:00"
language: "en"
---

# Boleto Bancário Web Component

Add Boleto Bancário to your Components integration.

[View source](/payment-methods/boleto-bancario/web-component.md)

You can add Boleto Bancário to your existing integration. The following instructions show only what you must add to your integration specifically for Boleto Bancário.

If an instruction on this page corresponds with a step in the main integration guide, it includes a link to corresponding step of the main integration guide.

The additions you must make depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses:

## Sessions flow Component

### Before-You-Begin

## Requirements

| Requirement          | Description                                                                                                                                                                 |   |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| **Integration type** | Make sure that you have an existing Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). |   |
| **Checkout API**     | Make sure that you use Checkout API v68 or later.                                                                                                                           |   |
| **Setup steps**      | Before you begin, [add Boleto Bancário in your Customer Area](/payment-methods/add-payment-methods).                                                                        |   |

### Add-Parameters-Sessions-Request

## Add additional parameters to your /sessions request

When you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#create-a-payment-session), add the following parameters:

| Parameter                                                                                                              | Required                                                                                    | Description                                                                                                                                                                                                                                                                                      |
| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [shopperName](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperName)                   | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's `firstName` and `lastName`.                                                                                                                                                                                                                                                        |
| [billingAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-billingAddress)             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's `city`, `country`, `houseNumberOrName`, `postalCode,stateOrProvince`, and `street`.                                                                                                                                                                                                |
| [socialSecurityNumber](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-socialSecurityNumber) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's CPF or CNPJ number.                                                                                                                                                                                                                                                                |
| [deliverAt](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-deliverAt)                       |                                                                                             | **Checkout API v68 or later** The due date of the payment, using [ISO 8601](https://www.w3.org/TR/NOTE-datetime) format in UTC. If this is in a weekend or national holiday, the shopper can pay the Boleto the next working day. By default, the shopper has five days to complete the payment. |
| [shopperEmail](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperEmail)                 |                                                                                             | The shopper's email address. This is used for sending the shopper a copy of the payment form.                                                                                                                                                                                                    |
| [shopperStatement](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperStatement)         |                                                                                             | Free-text field with payment instructions. If you include this, make sure to state that you do not accept payments for a higher or lower amount than the original amount, or payments after the due date.                                                                                        |

If you leave the `shopperStatement` empty, it is populated with the following default Portuguese text:

|                                                                                                                                                                |                                                                                                                                                                  |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Não aceitar pagamento via cheque e/ou após a data do vencimento.                                                                                               | Do not accept payment by cheque and/or after the due date.                                                                                                       |
| Seu pedido será enviado somente após a confirmação do pagamento deste boleto, desde que não tenha divergência de valores entre o valor cobrado e o valor pago. | Your order will only be processed once the payment of this Boleto has been confirmed and as long as there is no difference between the payable and paid amounts. |
| A falta de pagamento deste boleto não implica em qualquer multa ou juros e o pedido será automaticamente cancelado.                                            | Failure to pay this boleto will not incur any penalty or interest and your order will be automatically cancelled.                                                |
| Não deposite nem faça transferência.                                                                                                                           | Do not pay by deposit or bank transfer.                                                                                                                          |

### Import

## Import Boleto Bancário

When you [import Adyen Web](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#get-adyen-web), include `Boleto`.

**Import**

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

### Add-Configuration

## Add additional configuration for Boleto Bancário

[Configure the Component](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#configure-the-component) with the following configuration object:

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                 | Required | Description                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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)](https://en.wikipedia.org/wiki/CPF_number) number or their [Cadastro Nacional da Pessoa Jurídica (CNPJ)](https://en.wikipedia.org/wiki/CNPJ) number. |
| `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.                                                                                                                                                                                                                                                                                 |
| `showEmailAddress`        |          | Set this to **false** if you have already collected the shopper's email address.                                                                                                                                                                                                                                                                                                                                          |
| `data`                    |          | Object to pre-fill shopper details on the form: `socialSecurityNumber`, `shopperName`, `billingAddress`, and `shopperEmail` as shown in the example below. By default this object is empty.                                                                                                                                                                                                                               |

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

**Create a configuration object**

```javascript
{
    personalDetailsRequired: false,
    billingAddressRequired: false,
    showEmailAddress: false,
    data: {
          firstName: 'José',
          lastName: 'Silva',
          billingAddress: {
             city: 'São Paulo',
             country: `BR`
             houseNumberOrName: '952',
             postalCode: '04386040',
             stateOrProvince: 'SP',
             street: 'Rua Funcionarios',
          }
    }
}
```

### Initialize

## Initialize the Component for Boleto Bancário

To [initialize](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#initialize-the-payment-session) Boleto Bancário, use the `Boleto` class.

**Initialize the Component**

```javascript
const boletoComponent = new Boleto(checkout,
    {
    // The configuration object for Boleto Bancário that you created.
    // Mount the Component to a container.
    }).mount('#boleto-container')
```

## 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](https://ca-test.adyen.com/).
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](https://ca-test.adyen.com/):

* 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](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).

## Advanced flow Component

## Requirements

| Requirement          | Description                                                                                                                                                                                                                        |   |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| **Integration type** | Make sure that you have an existing Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components).                                                        |   |
| **Action handling**  | Make sure that your existing integration is set up to [handle the additional action](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#handle-the-redirect). `action.type`: **voucher**. |   |
| **Setup steps**      | Before you begin, [add Boleto Bancário in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                               |   |

### Import

## Import Boleto Bancário

When you [import Adyen Web](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#get-adyen-web), include `Boleto`.

**Import**

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

### Initialize

## Initialize the Component for Boleto Bancário

To [initialize](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#initialize-the-payment-session) Boleto Bancário, use the `Boleto` class.

**Initialize the Component**

```javascript
const boletoComponent = new Boleto(checkout,
    {
    // The configuration object for Boleto Bancário that you created.
    // Mount the Component to a container.
    }).mount('#boleto-container')
```

### Add-Parameters-Payments-Request

## Add additional parameters to your /payments request

When you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#make-a-payment), add the following parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

| Parameter                                                                                                              | Required                                                                                    | Description                                                                                                                                                                                                                                                        |
| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| paymentMethod.type                                                                                                     | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | **boletobancario**                                                                                                                                                                                                                                                 |
| [shopperName](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperName)                   | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's `firstName` and `lastName`.                                                                                                                                                                                                                          |
| [billingAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-billingAddress)             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's `city`, `country`, `houseNumberOrName`, `postalCode,stateOrProvince`, and `street`.                                                                                                                                                                  |
| [socialSecurityNumber](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-socialSecurityNumber) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's CPF or CNPJ number.                                                                                                                                                                                                                                  |
| [deliveryDate](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-deliveryDate)                 |                                                                                             | The due date of the payment, using [ISO 8601](https://www.w3.org/TR/NOTE-datetime) format in UTC. If this is in a weekend or national holiday, the shopper can pay the Boleto the next working day. By default, the shopper has five days to complete the payment. |
| [shopperEmail](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperEmail)                 |                                                                                             | The shopper's email address. This is used for sending the shopper a copy of the payment form.                                                                                                                                                                      |
| [shopperStatement](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperStatement)         |                                                                                             | Free-text field with payment instructions. If you include this, make sure to state that you do not accept payments for a higher or lower amount than the original amount, or payments after the due date.                                                          |

If you leave the `shopperStatement` empty, it is populated with the following default Portuguese text:

|                                                                                                                                                                |                                                                                                                                                                  |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Não aceitar pagamento via cheque e/ou após a data do vencimento.                                                                                               | Do not accept payment by cheque and/or after the due date.                                                                                                       |
| Seu pedido será enviado somente após a confirmação do pagamento deste boleto, desde que não tenha divergência de valores entre o valor cobrado e o valor pago. | Your order will only be processed once the payment of this Boleto has been confirmed and as long as there is no difference between the payable and paid amounts. |
| A falta de pagamento deste boleto não implica em qualquer multa ou juros e o pedido será automaticamente cancelado.                                            | Failure to pay this boleto will not incur any penalty or interest and your order will be automatically cancelled.                                                |
| Não deposite nem faça transferência.                                                                                                                           | Do not pay by deposit or bank transfer.                                                                                                                          |

The response includes the `action.type`: voucher, and the following:

* `pspReference`: Our unique reference for the payment.

* `resultCode`: **PresentToShopper**

* `action`: Object containing information about the voucher:

  * `downloadUrl`: Link to the downloadable Boleto in PDF format.
  * `expiresAt`: The date and time when the due date expires.
  * `paymentMethodType`: Indicates the issuing bank.
  * `reference`: The barcode number for the payment.
  * `totalAmount`: The `currency` and `value` of the amount due.

## 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](https://ca-test.adyen.com/).
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](https://ca-test.adyen.com/):

* 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](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).
