OXXO Component

Our OXXO Component renders OXXO in your payment form. When the shopper selects to pay, the Component generates the OXXO voucher and returns it to you.

When making a OXXO payment, you also need to:

• Present the OXXO voucher to the shopper, who can then copy the barcode number or print the voucher and pay in cash at an OXXO store.

Before you begin

This page explains how to add OXXO to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your OXXO integration:

1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
2. Add OXXO in your Customer Area.
   

Show OXXO in your payment form

To show the OXXO Component in your payment form, you need to:

1. Specify in your /paymentMethods request:

   • countryCode: MX
   • amount.currency: MXN

   Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

2. Add the OXXO Component:

   a. Create a DOM element for OXXO, placing it where you want the form to be rendered:

   <div id="oxxo-container"></div>

   b. Create an instance of the OXXO Component, and mount it.

   https://docs.adyen.com/payment-methods/oxxo/web-component#example-configuration

   Example configuration

   const oxxoInput = checkout
       .create('oxxo')
       .mount('#oxxo-container');

Make a payment

When the shopper selects to pay, the Component calls the onSubmit event, which contains a state.data.

1. If state.isValid is true, collect the state.data and pass this to your server.

2. From your server, make a /payments request, specifying:

   • amount: The currency and value of the amount due.
   • reference: Your reference to uniquely identify a payment. This reference is used in all communication with you about the payment status.
   • paymentMethod.type: The state.data.paymentMethod from the onSubmit event from your front end, in this case oxxo.
   • returnUrl: The URL to return to after the voucher is created.
   • merchantAccount: Your unique merchant account identifier, with which you want to process the transaction.
   • countryCode: The country code for the payment method, in this case MX.
   https://docs.adyen.com/payment-methods/oxxo/web-component#payments

   /payments request

   curl https://checkout-test.adyen.com/v67/payments \
   -H "x-API-key: YOUR_X-API-KEY" \
   -H "content-type: application/json" \
   -d '{
       "amount": {
           "currency": "MXN",
           "value": 30000
       },
       "reference": "YOUR_ORDER_NUMBER",
       "paymentMethod": {
           "type": "oxxo"
       },
       "returnUrl": "https://your-company.com/...",
       "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
       "countryCode": "MX"
   }'

   The /payments response with action.type voucher contains:

   • resultCode: PresentToShopper

   • action: Object containing information about the voucher:

     • alternativeReference: This reference is a short version of the barcode number of the voucher.
     • expiresAt: The date and time when the due date expires.
     • initialAmount: The currency and value of the amount due.
     • instructionsUrl: Link to instructions on how to pay.
     • merchantName: The name of your company.
     • merchantReference: The reference to uniquely identify a payment. This reference is used in all communication with you about the payment status.
     • paymentMethodType: This will state oxxo.
     • reference: The barcode number of the voucher.

     • totalAmount: The currency and value of the amount due.

   https://docs.adyen.com/payment-methods/oxxo/web-component#-payments-response

   /payments response

   {
       "resultCode": "PresentToShopper",
       "action": {
           "alternativeReference": "59570565678234",
           "expiresAt": "2019-10-12T00:00:00",
           "initialAmount": {
               "currency": "MXN",
               "value": 30000
           },
           "instructionsUrl": "https://checkoutshopper-test.adyen.com/checkoutshopper/voucherInstructions.shtml?txVariant=oxxo",
           "merchantName": "YOUR_MERCHANT_NAME",
           "merchantReference": "YOUR_ORDER_NUMBER",
           "paymentMethodType": "oxxo",
           "reference": "59595705656782342019101200903004",
           "totalAmount": {
               "currency": "MXN",
               "value": 30000
           },
           "type": "voucher"
       }
   }
3. Pass the action object to your front end.

Present the voucher

Call createFromAction and pass the action object from the previous step. This will return a new Component that you need to mount:

// optionally unmount the input section
oxxoInput.unmount();
checkout.createFromAction(action).mount('#my-container');

The Component presents the voucher to the shopper.

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.

Present the payment result

Use the resultCode that you received in the /payments response to inform your shopper of the payment status.

The resultCode value you can receive for OXXO is:

To follow the status of the voucher, you have to set up notifications to receive payment updates and results through a notification webhook.
If you set up PENDING notifications specifically for OXXO, you receive a notification for pending OXXO voucher payments. You will receive the final result of the payment in an AUTHORISATION notification.

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.

When you create the voucher, it is shown as an offer in your Customer Area, with an Open status. If you've set up notifications, you will get a PENDING notification.

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. If you've set up notifications, you will get an AUTHORISATION notification. This all happens automatically in a live environment, but you can test this process in your Customer Area.

To be able to test this flow, make sure that you have the following user roles in your test Customer Area:

• Merchant view offers: This allows you to see OXXO offers that are Open in your Customer Area.
• Promote offers to sale (test): This allows you to manually promote an OXXO offer from Open to Received in your Customer Area. In this way, you can test what happens when we process the payment. This permission is only available in TEST.

Check the status of OXXO test payments in your Customer Area:

• OXXO vouchers that are pending or that have expired, are under Transactions > Offers.
• 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.

See also