OXXO Component

Add OXXO to an existing Components integration.

This page explains how to add OXXO to your existing Web Components integration.

When a shopper selects OXXO as the payment method, they will receive a voucher with a barcode. They can then copy the barcode number or print the voucher and present it to the cashier at an OXXO store to pay for their order in cash.

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 OXXO:

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

API reference

You do not need to send additional fields for OXXO. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:

/sessions: This is the default with Components v5.0.0 or later.
/payments: If you implemented an additional use case.

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="oxxo-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 oxxo = new Oxxo(checkout).mount('#oxxo-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const oxxoComponent = checkout.create('oxxo').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.

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, 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. 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.

Log in to your test Customer Area.
Go to Transactions > Offers.
Select the PSP reference of the pending OXXO payment.
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.

Before you can accept live OXXO payments, you need to submit a request to add the OXXO payment method in your live Customer Area.