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

Requirement Description
Integration type Make sure that you have built your Web Components integration.
Webhooks To make MobilePay payouts, you need to configure recurring lifecycle webhooks.
Limitations The MobilePay payout feature is experimental, and supported only with the /payments endpoint. See the full payout limitations.
Setup steps Before you begin, add MobilePay in your test Customer Area.

API reference

Select which endpoint you are using:

Payout payments

To make a MobilePay payment and generate a token for future payouts to MobilePay wallets:

  1. Make sure that you have set up the recurring lifecycle webhook.

  2. Make a /payments request as usual, but include the parameters to create a token:

    • telephoneNumber
    • shopperReference
    • enablePayout set to true

  3. When you receive the recurring lifecycle webhook for the payment, save the storedPaymentMethodId (the token) for your customer, identified by the shopperReference.

  4. When you want to make a payout to the shopper's MobilePay wallet, send a POST /transfers request specifying the payout token in the counterparty.card.cardIdentification field.

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');

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

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.

  1. Submit a request for MobilePay in your live Customer Area.

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

Test payouts to MobilePay wallets

The MobilePay payout feature is experimental, and supported only with the /payments endpoint.

Do the following to test MobilePay payouts:

  1. Get a test app following the instructions in the VippsMobilePay documentation. When prompted for a phone number and NIN (national identity number), use one of the following sets:

    • NIN 0407640091
      Phone +45 22105837

    • NIN 0702860109
      Phone +45 34817154

    • NIN 0111500196
      Phone +45 73920021

  2. Test your integration end-to-end:

    • Make a test payment that generates a payout token, using the Vipps MobilePay test app to simulate the customer side.
    • Check that you receive and process the recurring lifecycle webhook.
    • Make a Transfers API request using the token that you receive in the webhook.

See also