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

# OXXO Web Component

Add OXXO to your Components integration.

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

You can add OXXO to your existing integration. The following instructions show only what you must add to your integration specifically for OXXO.

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

What you must add to your integration 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 OXXO in your Customer Area](/payment-methods/add-payment-methods).                                                                                   |   |

### Add-Parameters-Sessions-Request

## Add additional parameters to your /sessions request

You do not need to add any parameters when you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#create-a-payment-session).

### Import

## Import OXXO

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

**Import**

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

### Add-Configuration

## Add additional configuration for OXXO

You do not need to add any configuration parameters for OXXO.

### Initialize

## Initialize the Component for OXXO

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

**Initialize the Component**

```javascript
const oxxoComponent = new Oxxo(checkout,
    {
    // The configuration object for OXXO that you created.
    // Mount the Component to a container.
    }).mount('#oxxo-container')
```

## Test and go live

OXXO is an offline payment method. This means that there is time between the shopper receiving the voucher and the actual processing of the payment.

To follow the status of the voucher, you have to set up [webhooks](/development-resources/webhooks).

When you create the voucher, it is shown as an offer in your Customer Area, with an **Open** status. If you set up [PENDING webhooks specifically for OXXO](/development-resources/webhooks/webhook-types#other-webhooks), you receive a webhook for pending OXXO voucher payments.

When the shopper pays the voucher at an OXXO store, the payment will be processed. The offer becomes a sale and the status changes to **Received**. You will receive the final result of the payment in an [AUTHORISATION webhook](/development-resources/webhooks/webhook-types). This all happens automatically in a live environment, but you can test this process in your Customer Area.

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

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

Before you can accept live OXXO payments, you need to [submit a request to add the OXXO payment method](/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 OXXO in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                          |   |

### Import

## Import OXXO

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

**Import**

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

### Initialize

## Initialize the Component for OXXO

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

**Initialize the Component**

```javascript
const oxxoComponent = new Oxxo(checkout,
    {
    // The configuration object for OXXO that you created.
    // Mount the Component to a container.
    }).mount('#oxxo-container')
```

### Add-Parameters-Payments-Request

## Add additional parameters to your /payments request

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

## Test and go live

OXXO is an offline payment method. This means that there is time between the shopper receiving the voucher and the actual processing of the payment.

To follow the status of the voucher, you have to set up [webhooks](/development-resources/webhooks).

When you create the voucher, it is shown as an offer in your Customer Area, with an **Open** status. If you set up [PENDING webhooks specifically for OXXO](/development-resources/webhooks/webhook-types#other-webhooks), you receive a webhook for pending OXXO voucher payments.

When the shopper pays the voucher at an OXXO store, the payment will be processed. The offer becomes a sale and the status changes to **Received**. You will receive the final result of the payment in an [AUTHORISATION webhook](/development-resources/webhooks/webhook-types). This all happens automatically in a live environment, but you can test this process in your Customer Area.

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

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

Before you can accept live OXXO payments, you need to [submit a request to add the OXXO payment method](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).
