Masterpass™ Acceptance

How to add Masterpass as a payment option to your payment form.

CommBank Simplify makes it easy for you to add MasterPass as a payment option to your payment form. When you add MasterPass, your customers can choose to pay with any card registered in their MasterPass wallets.

Additionally, when you integrate with MasterPass using Simplify, you do not receive any of the customer's sensitive payment data. The card data is transferred between MasterPass and CommBank Simplify, and you will receive a single-use token that represents the payment information.

Overview

Adding MasterPass to your payments form is similar to tokenizing card details as described in the tutorial, so that payment form will be used as a basis for describing the steps involved.

When a customer clicks the MasterPass button, a new browser window will be opened. The customer will complete the MasterPass login and payment selection in this new window.
Upon completion (or cancellation), the MasterPass results are sent to Simplify. Simplify then generates a single-use payment token, closes the window, and invokes
a callback function on your page with the token contents.

Include Simplify.js

First you must include simplify.js in your page. If you are already performing tokenization of card details, your page will already have the required library included. jQuery is also required for these particular examples, but is not strictly required by simplify.js.

Add the Buy with MasterPass button to your form

You can add the MasterPass button anywhere on your page. First, create a div where you want the button to go.
The div must have a unique ID attribute. In the example below, we've added a div at the
end of our form with an ID of buy-with-masterpass-div.

Next, you'll use the simplify.js library to add the MasterPass button to the div you created once your page loads. In this example, we update the script
used in the payment form tutorial and add the button to our form.

Notice the call to SimplifyCommerce.addMasterPassCheckoutButton, which adds the MasterPass button to your div.
It takes four arguments:

ID of the div in which you want to place the button.

Your public API key.

Reference to a function to handle the MasterPass response (success or failure).

Reference to a function to handle the case when the customer cancels the action.

This is the button that will be added to your page.

TESTING: During testing and integration, you will be sent to the sandbox MasterPass environment. You can login to the sandbox MasterPass Wallet using the credentials: User: masterpass@simplify.com Password: abcd1234 and Security Code: 123456.
The default card ending in 0014 can be used for approval in CommBank Simplify. All other cards will decline in sandbox mode.

Handle the MasterPass response

You will need to create two functions to handle the responses from simplify.js. The first will handle the response from CommBank Simplify containing the single-use token or
error if there was some failure, and the second will be invoked if your customer cancels the MasterPass payment selection.

Handle single-use token response

When the customer selects a card for payment from MasterPass, CommBank Simplify will create a single-use token and invoke this callback function with the response. If there are errors
with the token creation, the function will be invoked with the error details. You can handle the response in several ways. Here, we show two examples.

Example 1

In this example, we handle the response exactly as in the payment form tutorial. The callback function takes two arguments,
which are the same arguments as in the other tutorial. We check the response for errors and display them if they exist. Upon a successful response, the token is added to the form, and the form is submitted to your server.

Example 2

Instead of automatically submitting the form as in the previous example, you may also choose to display the results of the MasterPass selection to allow the customer to confirm before submitting
the form. In this case, you could populate the form with the card last four digits to show the customer the card that was selected. You might also choose here to hide other form elements, like
the expiration and CVC fields, or you may choose to display some message prompting the customer to review the payment details before submitting the form. This example shows
how it might look.

Handle the cancellation response

Next you will create a function that will be invoked if your customer cancels the MasterPass payment selection. You should note that if your customer manually closes the MasterPass window, this
function will not be invoked. In this example, we take no action, simply logging something to the console.

Completing the payment

Once the form is submitted to your server with the token, you must call the CommBank Simplify API from your server to complete the payment. This is performed exactly as
described in the Charging a Card section in the payment form tutorial.