Payment-method icon

MobilePay Web Component

Add MobilePay to an existing Web Components integration.

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

Requirements

Select the server-side flow that your integration uses:

Requirement Description
Integration type Make sure that you have built a Sessions flow Web Components integration.
Setup steps Before you begin, add MobilePay in your Customer Area.

API reference

Select which endpoint you are using:

This is the default with Components v5.0.0 or later.

Parameter name Required Description
telephoneNumber If you already have your shopper's phone number, send it in the request so they no longer have to provide this later when they are redirected to MobilePay.

For a full list of optional fields that you can send for all payment methods, see /sessions.

Expand view
Copy link to code block
Copy code
Copy code
curl https://checkout-test.adyen.com/v69/sessions \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
"merchantAccount": "YOUR_MERCHANT_ACCOUNT",
"reference": "YOUR_ORDER_REFERENCE",
"amount": {
"currency": "DKK",
"value": 1000
},
"countryCode": "DK",
"telephoneNumber": "+4512345678",
"returnUrl": "https://your-company.com/checkout?shopperOrder=12xy.."
}'

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:

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

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

Copy code
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