Migrating from Native Checkout v1.0

From September 14th 2019, the PSD2 banking directive will be in effect across all of Europe, affecting the way payments are made. Secure Customer Authentication (SCA) requires that merchants using Native Checkout v1.0 integrations with Viva Wallet’s payment processing system to migrate to Native Checkout v2.0 with 3DS support.

Care has been taken so that any implementation changes required to ensure PSD2 compliance are limited to a minimum and allow the re-use of existing implementations to a certain extent.

Step 1: Request a set of client credentials

Native Checkout v2 makes use of the new Native Checkout v2 API which requires OAuth 2 authorization. Open an issue on our GitHub repository including the following information in the request. Credentials will be delivered to your account’s confirmed email address. You can try them out by requesting an access token.

  • API access required (Native Checkout v2.0)
  • Environment (demo or production)
  • Business name
  • Merchant ID*

*For Viva Wallet accounts containing a number of merchant accounts, a different set of credentials is required for each.

Step 2: Add a reference to VivaPayments-2.0.js

Edit your HTML code and replace the existing reference https://www.vivapayments.com/web/checkout/js with https://www.vivapayments.com/web/checkout/v2/js.

Step 3: Employ the cardholder authentication callbacks

Modify your call to VivaPayments.cards.setup() method to enable the cardholder authentication window (3DS):

VivaPayments.cards.setup({
	// access token obtained from step 1
	authToken: accessToken,
	cardHolderAuthOptions: {
	    cardHolderAuthPlaceholderId: 'threed-pane',
	    cardHolderAuthInitiated: () => {
        	$("#dialog").dialog('open');
	    },
	    cardHolderAuthFinished: () => {
        	$("#dialog").dialog('close');
	    }
	}
});

cardHolderAuthPlaceholderId should contain the element ID which will hold the cardholder’s authentication window. cardHolderAuthInitiated signifies the start of a new authentication session and cardHolderAuthFinished its conclusion.

Base URLs

OldNew
Demohttps://demo.vivapayments.com/apihttps://demo-api.vivapayments.com
Productionhttps://demo.vivapayments.comhttps://api.vivapayments.com

Step 4: Request a charge token

Modify call to requestToken by passing amount as a parameter:

VivaPayments.cards.requestToken({
   amount: 3600
}).done((response) => {
   console.log(`Here's your charge token ${response.chargeToken}!`);
});

requestToken uses a Promise to return the chargeToken’s value, so any registered callbacks to cardTokenHandler will be rendered ineffective.

Step 5: Complete the payment

Completing a payment transaction requires no modifications, so any existing implementations will continue to work as expected.