MobilePay Web Component

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

Requirements

Select the server-side flow that your integration uses:

API reference

Select which endpoint you are using:

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="mobilepay-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 mobilePay = new Redirect(checkout, { type: 'mobilepay' }).mount('#mobilepay-container');

const mobilePayComponent = checkout.create('mobilepay').mount('#mobilepay-container');

Test and go live

MobilePay cannot be tested in the test environment. You must make penny test (low-amount) payments in the live environment.

Request MobilePay for the live environment

Submit a request for MobilePay in your live Customer Area.

Make test payments.

Use the following credentials for your test payments:

After MobilePay is added to your live Customer Area, do the following for each test payment:

1. Make a MobilePay payment for a low amount.
2. Get the AUTHORISATION webhook on your server. It includes the status of the payment.
3. In your live Customer Area, go to Transactions > Payments to see the status of the payment.

See also