User Tools

Create PDF

Site Tools

Masterpass Button

To integrate Masterpass into your online shop, a Masterpass button needs to be added. When your consumer clicks the button a JavaScript method which opens the Masterpass wallet is called.

Required Libraries

To use the methods described below, two libraries are required:

  • Wirecard Checkout Masterpass library
  • jQuery library (>= 1.10.2)
    It is recommended to pull the jQuery file from the public repository

Insert Button

The button can be inserted via a JavaScript method. This method alters a specified HTML element and inserts a Masterpass button.

var data = { 
  "walletId": "yourWalletId",
  "element": "yourElementId", 
  "callbackUrl": "http://<your-shops-url>"
WirecardCheckout.MasterPassClient.checkoutButton( data );
Required properties in data
Property Data Type Description
walletId String ID of the created Masterpass wallet.
element String ID of the HTML element where Masterpass button should be created.
callbackUrl String Redirect URL your consumer is redirected to after the interaction with Masterpass.

The results of the interaction between Masterpass and your consumer can be processed in two different ways:

  • Forward your consumer to a new page by defining the URL via callbackUrl in the data object.
  • Process the results with JavaScript by defining the callback functions for each case in the data object. If you do not need to support older browsers and mobile devices, you may omit the property callbackUrl, but we strongly recommend to set this property.

In any case your consumer will be redirected to the callback URL if the JavaScript functions can not be called after the interaction between your consumer and Masterpass. Additionally you can specify if you want to restrict the address selection to a specific area via shipping profiles or if you want to suppress the address selection all together.

You may also restrict the available credit card brands for the payment triggered by the created button using the property allowedCardTypes.

Property Data Type Description
successCallback Function JavaScript function which gets called if the interaction was completed successfully.
cancelCallback Function JavaScript function which gets called if your consumer canceled.
failureCallback Function JavaScript function which gets called if the interaction failed.
shippingLocationProfile String Shipping profile ID, e.g. “SP-0001”.
suppressShippingAddressEnabled Boolean Set to true, if shipping address selection should be suppressed,
i.e. for selling digital goods which do not need to be shipped.
allowedCardTypes String array String array of credit card brands allowed for the current payment. Can be “amex”, “diners”, “discover”, “jcb”, “maestro”, “master” and/or “visa”, e.g. ["jcb,maestro,master,visa"].

Create Own Button

You can alternatively create your own Masterpass button. To open the Masterpass wallet, this button needs to call the JavaScript method

WirecardCheckout.MasterPassClient.checkout( data )

The data argument needs to be as described above except for element, which is not needed in this case.


After the interaction between your consumer and the Masterpass wallet the specified callback is invoked with status information. The following data is returned:

Property Data Type Description
walletId String The ID of the wallet.

If your consumer is redirected to the callback URL, this information is transmitted as GET data. If the callback functions are invoked, the information is encapsulated in an object with the following structure and is given as parameter:

  "status": "SUCCESS",
  "walletId": "<walletId>"

This website uses cookies to deliver the best service to you. By continuing to browse the site, you are agreeing to our use of cookies.