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 on the test environment. Use live penny tests (payments for a minimal amount) instead.

1. Make sure that you have access to a live MobilePay account that is coupled with a Visa, Mastercard, or Dankort account, and a valid phone number.
2. Submit a request for MobilePay in your live Customer Area.
3. After MobilePay is added to your Customer Area, make a payment for a minimal amount choosing MobilePay as the payment method.
4. Check the status of the penny test in your live Customer Area > Transactions > Payments.

Go live

Before you can accept live MobilePay payments, you need to submit a request for MobilePay in your live Customer Area.

See also