{"html":"\u003Cheader\u003E\n  \u003Ch1 id=\"masterpass-guide\"\u003EMasterpass Guide\u003C/h1\u003E\n\n  \u003Cp\u003EAccept payments via \u003Ca href=\"https://masterpass.com/en-us/\"\u003EMasterpass\u003C/a\u003E in your existing Stripe integration.\u003C/p\u003E\n\u003C/header\u003E\n\n\u003Csection\u003E\n  \u003Caside class=\"note\"\u003E\n    \u003Ch3 id=\"masterpass-guidelines\"\u003EMasterpass guidelines\u003C/h3\u003E\n\n    \u003Cp\u003EBefore implementing, please refer to the \u003Ca href=\"https://developer.mastercard.com/page/masterpass-requirements-and-best-practices\"\u003Eimplementation requirements\u003C/a\u003E. By using Masterpass through Stripe, you agree to the Masterpass \u003Ca href=\"https://masterpass.com/assets/pdf/masterpassoperatingrules.pdf\"\u003EOperating Rules\u003C/a\u003E.\u003C/p\u003E\n  \u003C/aside\u003E\n\n  \u003Cp\u003EMasterpass is a third-party service that stores payment and shipping information for its users in order to streamline the checkout process. Instead of entering payment information on your checkout page, users can click the Masterpass button instead. Your Stripe integration receives a unique transaction ID that it can use to create a charge against the payment information stored in the user’s Masterpass account.\u003C/p\u003E\n\u003C/section\u003E\n\n\u003Csection\u003E\n  \u003Ch2 id=\"integrating\"\u003EIntegrating the Masterpass button\u003C/h2\u003E\n\n  \u003Cp\u003ETo get started, generate your Masterpass \u003Cstrong\u003ECheckout ID\u003C/strong\u003E in the \u003Ca href=\"https://dashboard.stripe.com/account/payments/settings\"\u003EDashboard\u003C/a\u003E and configure your sandbox and production callback URLs.\u003C/p\u003E\n\n  \u003Cp\u003ETo use Masterpass on your website, add the following script tag to your HTML document:\u003C/p\u003E\n\n\n\u003Cdiv class='tabs tabs-regular animated' \u003E\n  \u003Cnav class=\"nav-tabs\"\u003E\n    \n        \u003Ca\u003ESandbox\u003C/a\u003E\n        \u003Ca\u003EProduction\u003C/a\u003E\n  \u003C/nav\u003E\n  \u003Cdiv class=\"tabs-content\"\u003E\n    \u003Cdiv class=\"tabs-tab\" id='sandbox'\u003E\u003Cdiv class=\"code\" data-language=\"html\"\u003E\n  \u003Cpre class=\"language-html numbered\" \u003E\u003Ccode\u003E\u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;https://sandbox.masterpass.com/integration/merchant.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\u003C/div\u003E\u003Cdiv class=\"tabs-tab\" id='prod'\u003E\u003Cdiv class=\"code\" data-language=\"html\"\u003E\n  \u003Cpre class=\"language-html numbered\" \u003E\u003Ccode\u003E\u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;https://masterpass.com/integration/merchant.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\u003C/div\u003E\n  \u003C/div\u003E\n\u003C/div\u003E\n\n  \u003Cp\u003ETo display the Masterpass button, use the following image:\u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"html\"\u003E\n  \u003Cpre class=\"language-html numbered\" \u003E\u003Ccode\u003E\u0026lt;img id=\u0026quot;mpbutton\u0026quot; src=\u0026quot;https://static.masterpass.com/dyn/img/btn/global/mp_chk_btn_147x034px.svg\u0026quot;/\u0026gt;\n\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\n  \u003Cp\u003EAttach a click handler to the image and use it to invoke the \u003Ccode\u003Emasterpass.checkout\u003C/code\u003E function with the desired parameters:\u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"javascript\"\u003E\n  \u003Cpre class=\"language-javascript numbered\" \u003E\u003Ccode\u003Econst button = document.getElementById(\u0026#39;mpbutton\u0026#39;);\n\nbutton.addEventListener(\u0026#39;click\u0026#39;, (ev) =\u0026gt;\n  masterpass.checkout({\n    checkoutId: \u0026#39;{{MASTERPASS_CHECKOUT_ID}}\u0026#39;,\n    allowedCardTypes: [\u0026#39;master\u0026#39;, \u0026#39;amex\u0026#39;, \u0026#39;visa\u0026#39;],\n    amount: \u0026#39;10.00\u0026#39;,\n    currency: \u0026#39;USD\u0026#39;,\n    cartId: \u0026#39;{{UNIQUE_ID}}\u0026#39;,\n    callbackUrl: \u0026#39;{{CALLBACK_URL}}\u0026#39;\n  }));\n\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\n  \u003Cp\u003EThe \u003Ccode\u003Emasterpass.checkout\u003C/code\u003E function requires the following parameters:\u003C/p\u003E\n\n  \u003Ctable\u003E\n    \u003Cthead\u003E\n      \u003Ctr\u003E\n        \u003Cth\u003EParameter\u003C/th\u003E\n        \u003Cth\u003EDescription\u003C/th\u003E\n      \u003C/tr\u003E\n    \u003C/thead\u003E\n    \u003Ctbody\u003E\n      \u003Ctr\u003E\n        \u003Ctd\u003E\u003Ccode\u003EcheckoutId\u003C/code\u003E\u003C/td\u003E\n        \u003Ctd\u003EThe Checkout ID for your Masterpass project, copied from the \u003Ca href=\"https://dashboard.stripe.com/account/payments/settings\"\u003EDashboard\u003C/a\u003E\u003C/td\u003E\n      \u003C/tr\u003E\n      \u003Ctr\u003E\n        \u003Ctd\u003E\u003Ccode\u003EallowedCardTypes\u003C/code\u003E\u003C/td\u003E\n        \u003Ctd\u003EA list of the Masterpass-compatible payment providers that you want to support\u003C/td\u003E\n      \u003C/tr\u003E\n      \u003Ctr\u003E\n        \u003Ctd\u003E\u003Ccode\u003Eamount\u003C/code\u003E\u003C/td\u003E\n        \u003Ctd\u003EThe amount of the transaction, expressed in decimal format\u003C/td\u003E\n      \u003C/tr\u003E\n      \u003Ctr\u003E\n        \u003Ctd\u003E\u003Ccode\u003Ecurrency\u003C/code\u003E\u003C/td\u003E\n        \u003Ctd\u003EThe currency in which to perform the transaction\u003C/td\u003E\n      \u003C/tr\u003E\n      \u003Ctr\u003E\n        \u003Ctd\u003E\u003Ccode\u003EcartId\u003C/code\u003E\u003C/td\u003E\n        \u003Ctd\u003EA unique string that you generate to identify the purchase\u003C/td\u003E\n      \u003C/tr\u003E\n      \u003Ctr\u003E\n        \u003Ctd\u003E\u003Ccode\u003EcallbackUrl\u003C/code\u003E\u003C/td\u003E\n        \u003Ctd\u003EThis optional parameter can be used to override the default callbackUrl configured when activating Masterpass.\u003C/td\u003E\n      \u003C/tr\u003E\n    \u003C/tbody\u003E\n  \u003C/table\u003E\n\n  \u003Cp\u003EFor more details about the \u003Ccode\u003Emasterpass.checkout\u003C/code\u003E function and the parameters that it accepts, \u003Ca href=\"https://developer.mastercard.com/documentation/masterpass-merchant-integration-v7/7#standard-checkout1\"\u003Erefer\u003C/a\u003E to Mastercard’s documentation.\u003C/p\u003E\n\u003C/section\u003E\n\n\u003Csection\u003E\n  \u003Ch2 id=\"completing-the-payment\"\u003ECompleting the payment\u003C/h2\u003E\n\n  \u003Cp\u003EWhen the user clicks the Masterpass button on your checkout page, it takes them to the Masterpass website where they can select an existing payment method from their account or input a new one. When the user completes the process, Masterpass redirects them to the callback URL that you configured when activating Masterpass, or the specified callback URL when invoking \u003Ccode\u003Emasterpass.checkout\u003C/code\u003E function. It appends an \u003Ccode\u003Eoauth_verifier\u003C/code\u003E URL query parameter that your application can use to complete the transaction.\u003C/p\u003E\n\n\n\u003Cdiv class='tabs tabs-regular animated persists syncs' data-save-url='true' data-group='paymentAPI'\u003E\n  \u003Cnav class=\"nav-tabs\"\u003E\n    \n        \u003Ca\u003ECharges API\u003C/a\u003E\n        \u003Ca\u003EPayment Intents API\u003C/a\u003E\n  \u003C/nav\u003E\n  \u003Cdiv class=\"tabs-content\"\u003E\n    \u003Cdiv class=\"tabs-tab\" id='charges'\u003E\u003Cp\u003EIn the route handler for the redirect destination, extract the URL query parameter and use it to \u003Ca href=\"/docs/api/sources/create\"\u003Ecreate a source\u003C/a\u003E. Next, \u003Ca href=\"/docs/api/charges/create\"\u003Ecreate a charge\u003C/a\u003E with the ID of the returned source. The following code example demonstrates how to create a Masterpass charge in Node.js with the Koa framework:\u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"javascript\"\u003E\n  \u003Cpre class=\"language-javascript numbered\" \u003E\u003Ccode\u003Erouter.get(\u0026#39;/callback\u0026#39;, async (ctx) =\u0026gt; {\n  const amount = 1000;\n  const currency = \u0026#39;usd\u0026#39;;\n\n  const result = await stripe.sources.create({\n    type: \u0026#39;card\u0026#39;, currency, amount,\n    card: {\n      masterpass: {\n        cart_id: \u0026#39;{{UNIQUE_ID}}\u0026#39;,\n        transaction_id: ctx.query.oauth_verifier\n      }\n    }\n  });\n\n  const charge = await stripe.charges.create({\n    amount, currency,\n    source: result.source.id\n  });\n\n  ctx.body = \u0026#39;\u0026lt;h1\u0026gt;Charge succeeded\u0026lt;/h1\u0026gt;\u0026#39;;\n});\n\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\u003C/div\u003E\n\u003Cdiv class=\"tabs-tab\" id='payment-intents'\u003E\u003Cp\u003EIn the route handler for the redirect destination, extract the URL query parameter and use it to \u003Ca href=\"/docs/api/payment_intents/confirm\"\u003Econfirm\u003C/a\u003E the \u003Ca href=\"/docs/api/payment_intents\"\u003EPaymentIntent\u003C/a\u003E that you have created at the beginning of the checkout flow.\nSee the \u003Ca href=\"/docs/payments/payment-intents/quickstart\"\u003EPayment Intents API Quickstart\u003C/a\u003E to learn how to manage your checkout flow using Payment Intents.\u003C/p\u003E\n\n\u003Cp\u003EThe following code example demonstrates how to confirm a PaymentIntent with Masterpass in Node.js with the Koa framework:\u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"javascript\"\u003E\n  \u003Cpre class=\"language-javascript numbered\" \u003E\u003Ccode\u003Erouter.get(\u0026#39;/callback\u0026#39;, async (ctx) =\u0026gt; {\n  // retrieve the PaymentIntent ID created at the beginner of the checkout flow.\n  const payment_intent_id = \u0026#39;{{PAYMENT_INTENT_ID}}\u0026#39;;\n\n  const payment_intent = await stripe.paymentIntents.confirm(payment_intent_id, {\n    payment_method_data: {\n      type: \u0026#39;card\u0026#39;,\n      card: {\n        masterpass: {\n          card_id: \u0026#39;{{UNIQUE_ID}}\u0026#39;,\n          transaction_id: ctx.query.oauth_verifier,\n        },\n      },\n    },\n  });\n\n  ctx.body = \u0026#39;\u0026lt;h1\u0026gt;Charge succeeded\u0026lt;/h1\u0026gt;\u0026#39;;\n});\n\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\u003C/div\u003E\n  \u003C/div\u003E\n\u003C/div\u003E\n\n  \u003Cp\u003EPlease use the Masterpass sandbox environment in Stripe’s test mode, and the Masterpass production environment in Stripe’s live mode. When creating the source, be sure to use the same unique value for the \u003Ccode\u003Ecart_id\u003C/code\u003E property that you used on your checkout page.\u003C/p\u003E\n\u003C/section\u003E\n\n\u003Csection\u003E\n  \u003Ch2 id=\"testing-masterpass\"\u003ETesting Masterpass\u003C/h2\u003E\n\n  \u003Cp\u003ETo test your Masterpass integration against Mastercard’s sandbox, create a new Masterpass user account during the checkout process on your website. Configure the account to use one of the \u003Ca href=\"https://developer.mastercard.com/page/masterpass-sandbox-testing-guidelines#new-web-experience\"\u003Etest cards\u003C/a\u003E from the Masterpass documentation. Complete the checkout process as normal, selecting the test card as your Masterpass payment method. If everything worked correctly, Masterpass will redirect you back to your application, which should create the charge as expected.\u003C/p\u003E\n\u003C/section\u003E\u003Cfooter\u003E\n\n\u003Ch2 data-no-anchor\u003EQuestions?\u003C/h2\u003E\n\n\u003Cp\u003E\n  We're always happy to help with code or other questions you might have. \u003Ca href='#' id='search-link' class='search-link'\u003ESearch our documentation\u003C/a\u003E, \u003Ca href='https://support.stripe.com/contact'\u003Econtact support\u003C/a\u003E, or \u003Ca href='https://stripe.com/contact/sales'\u003Econnect with our sales team\u003C/a\u003E. You can also chat live with other developers in \u003Ca href=\"irc://irc.freenode.net/stripe\"\u003E#stripe\u003C/a\u003E on freenode.\n\u003C/p\u003E\n\u003Cscript nonce=\"hu+fFGlIpNEjIoljMZpf2g==\"\u003E  document.getElementById(\"search-link\").addEventListener(\"click\", focusSearch);\n  function focusSearch() {\n    document.querySelector(\".search input\").focus();\n    window.scrollTo(0,0);\n  }\n\u003C/script\u003E\n\u003Cp data-csat-step=\"poll\" class=\"csat-widget\"\u003E\n  \u003Cspan class=\"csat-widget-text\"\u003EWas this page helpful?\u003C/span\u003E\n  \u003Cspan data-csat-poll=\"yes\" class=\"csat-button csat-button-yes common-Button\"\u003EYes\u003C/span\u003E\n  \u003Cspan data-csat-poll=\"no\" class=\"csat-button csat-button-no common-Button\"\u003ENo\u003C/span\u003E\n\u003C/p\u003E\n\n\u003Cdiv data-csat-step=\"input\" class=\"csat-widget\"\u003E\n  \u003Cdiv class=\"csat-input\"\u003E\n    \u003Cinput id=\"csat-input-text\" placeholder=\"Feedback about this page?\" class=\"common-Input\"\u003E\n    \u003Cspan id=\"csat-input-submit\" class=\"csat-button common-Link\"\u003ESend\u003C/span\u003E\n  \u003C/div\u003E\n  \u003Cp class=\"csat-contact\"\u003E\n    \u003Clabel class=\"csat-contact-option\"\u003E\n      \u003Cinput id=\"csat-contact-optin-checkbox\" type=\"checkbox\"\u003E\n      Yes, it’s okay to follow up by email.\n    \u003C/label\u003E\n  \u003C/p\u003E\n\u003C/div\u003E\n\n\u003Cp data-csat-step=\"reply\" class=\"csat-widget\"\u003E\n  \u003Cspan class=\"csat-reply-main\"\u003EThank you for helping improve Stripe's documentation.\u003C/span\u003E\n  \u003Cspan class=\"csat-reply-extended\"\u003EIf you need help or have any questions, please consider \u003Ca href=\"https://support.stripe.com/email\"\u003Econtacting support\u003C/a\u003E.\u003C/span\u003E\n\u003C/p\u003E\n\n\n\u003C/footer\u003E\n","head_css":"","documentation_footer_js":"","title":"Masterpass Guide | Stripe Payments","translated":null}