Vipps/MobilePay Express checkout

Introduction

Vipps/MobilePay Express lets the shopper share their profile (name, address, email, phone) and pick a shipping option directly inside the Vipps or MobilePay app, then redirects them back to complete the payment. the shopper's browser is redirected to Vipps/MobilePay's own hosted page or app, and back to the merchant's shopperResultUrl once done. It does not open in a pop-up and does not require inlineFlow.

There are two ways to use this. First with a standard checkout option on a payment page, and second with a fast checkout option on the cart page.

Standard checkout on the payment page

Loading the Vipps/MobilePay button via COPYandPAY payment widget is just like loading any other brand, i.e. in step 2, VIPPS and/or MOBILEPAY must be specified as brands.

See an example below.

During the normal checkout process, you can populate wpwlOptions.vippsMobilepayExpress (see the Vipps/MobilePay Express options table below) and the widget will automatically attach the correct hidden Express parameters to the checkout submission.

Fast checkout on the cart page

Sometimes you might want to display the Vipps/MobilePay button early in the payment workflow, where you do not yet have a checkout ID. Usually the shopper can decide whether to continue with the normal checkout, or to immediately pay with Vipps/MobilePay.

It is possible to display the Vipps/MobilePay button first, decoupled from the checkout ID, and create a checkout ID later. In step 2:

• Use paymentWidgets.js without a checkout ID

  <script src="https://eu-test.oppwa.com/v1/paymentWidgets.js"></script>

• Define a callback function in wpwlOptions.createCheckout to create a checkout

We will call the callback function once the Vipps or MobilePay button is clicked. The function will receive one parameter with the used brand ({brand: 'VIPPS'} or {brand: 'MOBILEPAY'}) and should return a checkout ID, or a promise that will return a checkout ID. Specifically, the returned object can be any thenable object. In particular, both JavaScript Promise and jQuery Promise are supported.

Example:

wpwlOptions.createCheckout = function(json) {
    // json.brand -- 'VIPPS' or 'MOBILEPAY'
    // Call your server to create a checkout
    return $.post("https://your.server/checkout-endpoint")
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
        return response.checkoutId;
    });
};

Vipps/MobilePay Express options

To use Express (profile sharing and/or fixed shipping options), populate wpwlOptions.vippsMobilepayExpress. This works the same way for both the standard checkout and the fast checkout flow.

shippingGroups: [
  {
    brand: "POSTNORD",
    type: "HOME_DELIVERY",
    options: [
      {
        id: "postnord_home_1",
        amount: { currency: "DKK", value: 4900 },
        name: "Delivery to your door",
        estimatedDelivery: "3-5 business days"
      }
    ]
  }
]