How To Integrate MasterPass in the Payment API

Written by: Emil Ray

MasterPass is here and available in BlueSnap’s Payment API! This is an important new digital wallet that securely stores a shopper’s payment and shipping details and supports all major credit and debit card types, including MasterCard, Visa, American Express, Discover, Diners, and JCB.

 

Offering MasterPass can help you increase conversions across devices, including mobile devices. Implementation is not difficult, so don’t let the initial setup stand in the way of getting more sales!

 

Let’s look high-level at what is involved in integrating with MasterPass in the Payment API (don’t worry Hosted Checkout merchants, you can find your documentation here):

 

Add the MasterPass button to your checkout page

To add the MasterPass button to your checkout page, you just need to add this code:

 

masterpass in the payment API _1

 

But where should you place the button to create the best checkout flow for your shopper?

 

We’d recommend placing it early on in the checkout process, before the shopper has had to complete any forms with the address or other details. This is because the shopper’s address and payment details are already stored in MasterPass, so you can take advantage of this to minimize checkout friction. Here’s an example of a shopping cart that includes the MasterPass checkout option right up front.

 

masterpass in the payment api _4

 

If the shopper checks out with MasterPass, you can then just pull the shopper info from MasterPass and populate any remaining forms with that information. Less work for the shopper means quicker checkout and lower chances that the shopper might abandon the cart.

 

Launch the MasterPass lightbox when the shopper chooses MasterPass

Once the shopper clicks the MasterPass button, you will launch the MasterPass lightbox. We provide you with a JavaScript function to use to launch the lightbox with the necessary parameters. (See the documentation for details).

 

The shopper will complete checkout in the lightbox, and upon finishing will be sent back to your site for final confirmation of the purchase.

 

Get final shopper confirmation

When the shopper finishes in MasterPass, BlueSnap will pass you the wallet ID and the shopper’s information from MasterPass. You can then display the relevant details, such as the final price and shipping address to the shopper and get the shopper’s confirmation to complete the purchase.

 

Process the transaction

After you have the shopper’s confirmation, you are ready to process the transaction via MasterPass in the Payment API!

 

There are two easy ways to do this:

 

Option 1. Create or update a Vaulted Shopper with the wallet info, and then use the vaulted shopper ID in the Auth Capture or Auth Only request

 

You can save the shopper’s information from the wallet by including it in a Create Vaulted Shopper or Update Vaulted Shopper request.

 

For example:

Create Vaulted Shopper with wallet ID

 

masterpass in the payment API _2

Then just send a standard Auth Only or Auth Capture request with the vaulted shopper ID.

 

Option 2. Add the wallet ID directly in your Auth Capture or Auth Only request
If you prefer, you can simply include the wallet ID directly in an Auth Only or Auth Capture request.

 

For example:

Auth Capture with wallet ID

 

 

masterpass in the payment API _3

 

That’s it!

 

Your transaction is complete and the shopper benefitted from a simple and smooth checkout process.

 

For complete details on MasterPass in the Payment API, see our Developer Hub.

 

If your payment gateway isn’t letting you integrate with digital wallets, you may want to consider switching. Here is your ultimate guide to switching payment gateways:

  • This field is for validation purposes and should be left unchanged.

We use cookies on this website. By using this site, you agree that we may store and access cookies on your device. Read more about our Cookie Policy.