{"id":3424,"date":"2021-03-09T17:26:30","date_gmt":"2021-03-09T17:26:30","guid":{"rendered":"https:\/\/documents.openpay.mx\/?p=3424"},"modified":"2022-02-20T23:53:44","modified_gmt":"2022-02-20T23:53:44","slug":"masterpass","status":"publish","type":"post","link":"https:\/\/documents-mx-dev.opdevhm.com\/en\/docs\/masterpass.html","title":{"rendered":"Masterpass"},"content":{"rendered":"
What is Masterpass?<\/strong><\/p> Masterpass provides an alternative for the data of the client's card to be safely provided to Openpay when making a payment.<\/p> 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.<\/p> Request here<\/a> for detailed information about Masterpass.<\/p> There are two possible flows for the customer to select a card in Masterpass:<\/p> To use the library for Openpay Masterpass follow the following steps:<\/p> To use Masterpass is required include:<\/p> 1) Add the JQuery library.<\/p> \u00a0<\/p> \u00a0<\/p> 2) Add the Masterpass library.<\/p> For testing<\/strong> use:<\/p><\/blockquote> \u00a0<\/p> \u00a0<\/p> For production<\/strong> use:<\/p><\/blockquote> \u00a0<\/p> \u00a0<\/p> 3) Add the Openpay library.<\/p> \u00a0<\/p> \u00a0<\/p> 4) Add the js library from Openpay for Masterpass. \u00a0<\/p> Url where the request is generated<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\tDocumentation.<\/h2>
Behavior.<\/h1>
Ajax flow (Lightbox).<\/h2>
<\/center>
Redirect flow.<\/h2>
<\/center>
Integration.<\/h1>
Requirements and dependencies.<\/h2>
<script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><\/span><\/code><\/pre><\/figure>
<script type=\"text\/javascript\" src=\"https:\/\/sandbox.static.masterpass.com\/dyn\/js\/switch\/integration\/MasterPass.client.js\"><\/script><\/span><\/code><\/pre><\/figure>
<script type=\"text\/javascript\" src=\"https:\/\/static.masterpass.com\/dyn\/js\/switch\/integration\/MasterPass.client.js\"><\/script><\/span><\/code><\/pre><\/figure>
<script type='text\/javascript' src=\"https:\/\/js.openpay.mx\/openpay.v1.min.js\"><\/script><\/span><\/code><\/pre><\/figure>
<\/a><\/p><script type=\"text\/javascript\" src=\"${yourContextPath}\/js\/openpay\/masterpass\/openpay-masterpass.js\"><\/script><\/span><\/code><\/pre><\/figure>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
Masterpass Button Configuration.<\/h2>
OpenPay<\/span>.<\/span>setId<\/span>(<\/span>'mYourMerchantId'<\/span>);<\/span>\nOpenPay<\/span>.<\/span>setApiKey<\/span>(<\/span>'pk_yourPublicKey'<\/span>);<\/span>\nOpenPay<\/span>.<\/span>setSandboxMode<\/span>(<\/span>true<\/span>);<\/span>\/\/ set false to go production<\/span><\/code><\/pre><\/figure><\/li>
Also add the link \"Learn more\" which must be dynamic, using the Available links<\/a> depending on the language and country of the user.<div class=\"MasterPassBtnExample\"><\/span>\n<a href=\"#\"> <img src=\"https:\/\/www.mastercard.com\/mc_us\/wallet\/img\/en\/US\/mcpp_wllt_btn_chk_180x042px.png\"><\/a><\/span>\n<\/div><\/span>\n<a href=\"https:\/\/www.mastercard.com\/mc_us\/wallet\/learnmore\/es\/MX\/\">Learn More<\/a><\/span><\/code>
\u00a0<\/code><\/pre><\/figure>
<\/center>Add the configuration event for the button.
OpenpayMasterpass<\/span>.<\/span>configureButton<\/span>(<\/span>\".MasterPassBtnExample a\"<\/span>,<\/span> {<\/span>\n originUrl<\/span> :<\/span> 'https:\/\/myWebApp\/demo\/masterpass\/main'<\/span>,<\/span>\n callbackUrl<\/span> :<\/span> 'https:\/\/myWebApp\/demo\/masterpass\/main'<\/span>,<\/span>\n enableShippingAddress<\/span> :<\/span> true<\/span><\/strong>,<\/span>\n successCallback<\/span> :<\/span> yourSuccessConfigureButtonCallback<\/span>,<\/span> \/\/ See an example below...<\/span>\n failureCallback<\/span> :<\/span> yourFailureCallback<\/span>,<\/span>\n cancelCallback<\/span> :<\/span> yourCancelCallback<\/span>,<\/span>\n shoppingCart<\/span> :<\/span> {<\/span>\/\/Shopping cart<\/span>\n currency<\/span>:<\/span> \"MXN\"<\/span>,<\/span> \/\/Currency<\/span>\n subtotal<\/span>:<\/span> \"123.00\"<\/span>,<\/span> \/\/Total Amount<\/span>\n items<\/span>:<\/span> [<\/span> \/\/Optionally an array of items<\/span>\n {<\/span>\n description<\/span> :<\/span> \"Pen\"<\/span>,<\/span> \/\/Some description<\/span>\n quantity<\/span> :<\/span> 2<\/span>,<\/span>\n value<\/span> :<\/span> \"100.00\"<\/span>,<\/span> \/\/Amount<\/span>\n imageUrl<\/span> :<\/span> \"https:\/\/cdn.pixabay.com\/photo\/2012\/04\/13\/17\/57\/pen-33077_960_720.png\"<\/span> \/\/Some image url<\/span>\n },<\/span>\n {<\/span>\n description<\/span> :<\/span> \"Pencil\"<\/span>,<\/span>\n quantity<\/span> :<\/span> 1<\/span>,<\/span>\n value<\/span> :<\/span> \"23.00\"<\/span>,<\/span>\n imageUrl<\/span> :<\/span> \"http:\/\/i50.twenga.com\/suministros\/lapiz\/lapices-staedtler-noris-hb-tp_3981652568322654320f.jpg\"<\/span>\n }<\/span>\n ]<\/span>\n }<\/span>\n});<\/span><\/code><\/pre><\/figure><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
Parameter<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
Description<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
Required<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
originUrl<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
No<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
callbackUrl<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t