Android Pay Mobile Web on Vantiv Core

Document created by gjsissons on Aug 29, 2016Last modified by gjsissons on Aug 18, 2017
Version 8Show Document
  • View in full screen mode

 

Support for Android Pay on Vantiv Core

Android Pay is an in-store and in-app (mobile or web) payment method, providing a secure process for consumers to purchase goods and services. In-store purchases are done by using Near Field Communication (NFC) technology built into the Android Smart phone with any NFC-enabled terminal at the retail POS. For in-app purchases, the consumer need only select Android Pay as the payment method in your application. You will need to modify your application to use Android Pay as a payment method.

 

Android Pay is supported by Vantiv through our ISO 8583 compliant payment interface (IBM RAFT) and on the 610 platform.

 

The Payment Request API

 

Android Pay Mobile Web relies on the W3C Payment Request API co-developed by Google, Microsoft, Facebook and others. The purpose of the specification is to standardize an API to allow merchants on websites to utilize one or more payment methods with minimal integration efforts.  Browser support for this API is evolving.  At the time of this writing the API is fully supported on the Chrome Browser on Android and partially supported in the latest Microsoft Edge browser. You can see a table detailing compatibility here. Although the API can be used to support payments with credit cards and other payment sources, the primary use case discussed here is making one-touch web payments using the Android Pay mobile wallet.

 

Reference Documentation

 

Pre-requisites to getting started

 

Before you can proceed with building and testing an integration, please make sure you have access to the following and are aware of the resources below:

 

Two methods of Integration

 

Vantiv supports two methods for merchants to submit Android Pay transactions from Web/Mobile applications to the eCommerce platform.

 

  • eProtect: The preferred method involves you sending certain Vantiv specific parameters to Google®. With this method, Google will call Vantiv's eProtect interface on your behalf. The response from Google includes a Vantiv eProtect paypageRegistrationId, which you use in you payment transaction submission to Vantiv. This is the integration method described here.
  • Alternate method: With the alternate method, you receive encrypted information from Google, decrypt it on your servers, and submit the information to Vantiv in a payment transaction. In this alternate method Android Pay will package the EMVCo token and will return it in response to an Android Pay FullWalletRequest() as part of a 3DS encrypted package (versus the individual data elements). This means that the 3DS package needs to be decrypted and parsed by the merchant before the transaction can be processed.

 

If you are already integrated to our core payment platforms, and are interested in adding support for Android Pay Mobile Web, please contact us and we will connect you with an integration consultant. The integration consultant can you help identify the best integration method depending on your requirements..

 

Overview of eProtect Integration Method

1. Check that the browser supports the Payment Request API

 

The PaymentRequest API is an emerging feature, and many browsers still do not support it. You'll need to insert logic into your web application to determine whether the browser visiting your site supports the API. Details are provided in the Google Payment Request API documentation.

 

An example of code to check for browser support (from the Google documentation) is provided below:

 

if (window.PaymentRequest) {
  // PaymentRequest supported
  // Continue with PaymentRequest API
} else {
  // PaymentRequest NOT supported
  // Continue with existing form based solution or eProtect integration
}

 

2. Check that the user has a method payment in their wallet

 

Assuming the PaymentRequest API is supported in the browser, you will still want to check whether a user has a valid payment method available in their wallet. You can use the canMakePayment() method to check this using code like the example below.

 

 

// Check if `canMakePayment()` exists as older Chrome versions
// don't support it.
if (request.canMakePayment) {
  request.canMakePayment().then(result => {
    if (result) {
      request.show();
    } else {
      // The user doesn't have an active payment method.
      // Forwarding to legacy form based experience or standard eProtect method
      location.href = '/checkout';
    }
  }).catch(error => {
    // Unable to determine.
    request.show();
  });
} else {
  request.show();
}

 

If there is no method of payment available, you may want to direct the user to a page that implements the standard eProtect web checkout option or another method to capture payment.  The developer can also choose to accept a credit card on supported browsers using the PaymentRequest API even though there may not be a card loaded into the Android Pay wallet.

 

3. Creating the Android Pay PaymentRequest()

 

Before you can create a PaymentRequest object that will display the Android Pay checkout page, you will need to populate a JSON structure called supportedInstruments as shown below.  This example shows how to identify Vantiv as your payment processor using the Gateway Token / eProtect integration method described above.

 

var supportedInstruments = [
  {
    supportedMethods: ['basic-card']
    data: {
      supportedNetworks: ['amex', 'discover', 'mastercard', 'visa']
    }
  },
  {
    supportedMethods: ['https://android.com/pay'],
    data: {
      //merchant ID obtained from Google that maps to your origin
      merchantId: '02510116604241796260',
      environment: 'TEST',
      // Credit Cards allowed via Android Pay
      allowedCardNetworks: ['AMEX', 'MASTERCARD', 'VISA', 'DISCOVER'],
      paymentMethodTokenizationParameters: {
        tokenizationType: 'GATEWAY_TOKEN',
        parameters: {
          'gateway': 'vantiv',
          'vantiv:merchantPayPageId': 'payPageId',
          'vantiv:merchantOrderId': 'OrderId',
          'vantiv:merchantTransactionId': 'id',
          'vantiv:merchantReportGroup': 'reportGroup'
        }
      }
    }
  }
];

 

The payPageId will be provided by your Vantiv integration consultant. This is the ID used by Google to connect to Vantiv's eProtect service on behalf of the merchant to exchange payment credentials for Vantiv's low-value token.

 

You must use the same orderId for all calls associated with the same transaction (i.e., Register Token, Authorization, Sale, etc.). Failure to use the same orderId can prevent customers from tracking their orders using the Android Pay application.

 

You will also need to specify the merchantId assigned to you by Google. Note that this example shows testing against Google's Android Pay test environment. Remove the line environment: 'TEST' to process against the live environment.

 

4. Create the PaymentRequest()

 

With the supportedInstruments() structure correctly setup you can create the PaymentRequest object and present the payment interface to the user as shown below.

 

Note that additional details and options will need to be specified when creating the payment object as well. These details are not covered here.

 

var payment = new PaymentRequest(
  supportedInstruments, // required payment method data
  details,              // required information about transaction
  options               // optional parameter for things like shipping, etc.
);


payment.show().then(function(response) {
  // Process response
  response.complete("success");
}).catch(function(err) {
  console.error("Uh oh, something bad happened", err.message);
});

 

5. Retrieve the Payment Credential from the PaymentResponse

 

The PaymentResponse object will include the paypageRegistrationID that can be used Authorize a payment transaction.  The paypageRegistrationID is referred to simply as the Registration ID in the Vantiv core documentation.

 

Transaction Examples using ISO 8583, 610 or HHMI

 

Most developers adding Android Pay support will already be familiar with how to performance transactions like Authorizations or Sales using Vantiv's core platforms so information is not repeated here.

 

Transaction examples can be found in the manual Vantiv Enterprise eProtect Integration Guide in Section 2.5, Transaction Examples When Using ISO 8583, 610. HHMI, and PWS.

 

 

 

 


 

Additional information about Vantiv core platforms available in the Vantiv O.N.E. Enterprise space. Vantiv O.N.E. members can  access our Technical Guides and Resources for Enterprise Integrations

Attachments

    Outcomes