Masterpass
What is Masterpass?
Masterpass provides an alternative for the data of the client's card to be safely provided to Openpay when making a payment.
We provide to you our integration guide, which will simplify the use of the Masterpass Javascript library, to integrate with the Openpay credit / debit card payment methods.
Documentation.
See here for detailed information about Masterpass.
Behavior.
There are two possible flows for the customer to select a card in Masterpass:
- Through Ajax, using the Lightbox modal interface.
- Or directly in Masterpass by Redirecting.
Ajax flow (Lightbox).
- The customer presses the Masterpass button on the web site.
- The event that was previously initialized in the function OpenpayMasterpass.configureButton
- Openpay returns the authentication result of your site.
- The card selection process is initialized in the modal "Masterpass lightbox".
- The customer selects the card.
- Masterpass sends the result of the selection to Openpay
- Openpay gets the selected card.
- Masterpass returns the information of the card.
- Openpay stores the information of the card and returns the token.
- The payment confirmation dialog is displayed.
- Customer confirms payment.
- The charge request with the token is sent to Openpay.
Redirect flow.
- The customer presses the Masterpass button on the web site.
- The event that was previously initialized in the function OpenpayMasterpass.configureButton
- Openpay returns the authentication result of your site.
- The user is redirected to Masterpass.
- The customer selects a card.
- Masterpass redirects the user to the Url configured in the function OpenpayMasterpass.configureButton
- The OpenpayMasterpass.getCheckoutData function is launched, which sends to Openpay the information obtained from Masterpass in the previous step.
- Openpay gets the selected card.
- Masterpass returns the information of the card.
- Openpay stores the information of the card and returns the token.
- The payment confirmation dialog is displayed.
- Customer confirms payment.
- The charge request with the token is sent to Openpay
Integration.
To use the library for Openpay Masterpass follow the following steps:
Requirements and dependencies.
To use Masterpass is required include:
- JQuery 1.10.2 o later (Masterpass.js Dependency)
- Masterpass.js
- Openpay.js
- Create a test account at Masterpass
1) Add the JQuery library.
2) Add the Masterpass library.
For testing use:
For production use:
3) Add the Openpay library.
4) Add the js library from Openpay for Masterpass.
Masterpass Button Configuration.
- Configure your Openpay Api keys.
- Add the Masterpass button with an .
- Add the Masterpass button with one of the
Available Designs.
Also add the link "Learn more" which must be dynamic, using the Available links depending on the language and country of the user.
- Add the configuration event for the button.
Parameter | Description | Required |
---|---|---|
originUrl | Url where the request is generated | No |
callbackUrl | Masterpass will add the authentication parameters to this Url, which will be used to redirect the client after selecting a card. You must perform the Redirect Management to obtain the authentication parameters and make the request to Openpay using the function OpenpayMasterpass.getCheckoutData | Yes |
enableShippingAddress | Indicator to enable delivery address selection | Yes |
successCallback | This function will be launched when Masterpass successfully responds for the Ajax flow. | Yes |
cancelCallback | Function that will be launched when the user cancels the card selection | Yes |
failureCallback | Function to be thrown if Masterpass responds with error code | Yes |
shoppingCart | Object related to the current purchase | No |
- shoppingCart object parameters:
Parameter | Description | Required |
---|---|---|
currency | Currency with which the transaction will be processed | Yes |
subtotal | Total purchase price | Yes |
items | Shopping Cart products array | No |
- Parameters of the object inside the array items:
Parameter | Description | Required |
---|---|---|
description | Description of the product | Yes |
quantity | Number of products | Yes |
value | Unit price | Yes |
imageUrl | Url of the image of the product | No |
OpenpayMasterpass.getCheckoutData function
The OpenpayMasterpass.getCheckoutData function is used to send the Masterpass response after the client selects a card.
- OpenpayMasterpass.getCheckoutData parameters
Parameter | Description | Required |
---|---|---|
masterpassResponse | Answer returned by Masterpass which will be interpreted by Openpay | Yes |
successCheckoutCallback | Function which will be launched when Openpay obtains the data of the card through Masterpass | Yes |
failureCheckoutCallback | Function that will be executed if Openpay fails to obtain the data of the client card | Yes |
Response handling by Ajax (Lightbox)
Adds the following function to handle the Masterpass response in case the lightbox mode is invoked, it must be passed to the parameter successCallback in the function OpenpayMasterpass.configureButton:
The previous function will be executed when confirming the selection of card in the modal "Lightbox":
Redirect response handling
You must take into account that masterpass could redirect to the user, so you must implement the following block of code which handles the masterpass response.
You can test this flow in sandbox omitting the parameter originUrl passed in the function object OpenpayMasterpass.configureButton
The attributes of the masterpassResponse object will be returned inside the URL when the user is redirected.
Función SuccessCheckoutCallBack
The SuccessCheckoutCallBack function is an example of how to handle the successful response of the function OpenpayMasterpass.getCheckoutData
- Openpay object response parameters
Parámetro | Descripción |
---|---|
response.data.id | Token of the card which must be used in the request for charge. |
response.data.card | Card object. (Masked Card Number) |
response.data.customer | Object with customer information |
response.data.customer.name | Customer name |
response.data.customer.last_name | Customer last name |
response.data.customer.email | Customer E-mail |
response.data.customer.phone_number | Customer's telephone number |
data.shipping_address | Object with shipping address information |
data.shipping_address.phone_number | Home phone number |
data.shipping_address.line1 | Address line 1 |
data.shipping_address.line2 | Address line 2 |
data.shipping_address.line3 | Address line 3 |
data.shipping_address.state | State |
data.shipping_address.city | City |
data.shipping_address.postal_code | Postal code |
data.shipping_address.country_code | Country code |
Demo.
In our Demo you can test and analyze the implementation of Masterpass described here: