Secure Remote Commerce Program Guide

    Accept payments via Secure Remote Commerce in your existing Stripe integration.

    Secure Remote Commerce (SRC) is an easy and secure way to pay online and is powered by the global payments industry to protect users’ payment information. Users can add cards from participating networks and enable click to pay simply and securely. Secure Remote Commerce delivers an enhanced online checkout experience and supports all network brands participating in SRC.

    Integrating the Secure Remote Commerce button

    To get started, generate your Masterpass Checkout ID in the Dashboard and configure your sandbox and production callback URLs. Note that Mastercard is offering SRC as an update to their Masterpass service, so you will see references to Masterpass within the documentation and code.

    To use SRC on your website, add the following script tag to your HTML document:

    <script type="text/javascript" src="https://sandbox.src.mastercard.com/srci/integration/merchant.js?locale=en_us&checkoutid={checkoutId}"></script>
    <script type="text/javascript" src="https://src.mastercard.com/srci/integration/merchant.js?locale=en_us&checkoutid={checkoutId}"></script>
    Parameter Description
    locale The country (and language) of the merchant. en_US is currently the only valid value as SRC is only available to US merchants.
    checkoutid The Checkout ID from Mastercard, copied from the Masterpass section of the Dashboard

    To display the Masterpass button, use one of the following images:

    For a button with black Masterpass text

    <img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>

    For a button with white Masterpass text

    <img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>
    Parameter Description
    locale The country (and language) of the merchant. en_US is currently the only valid value as SRC is only available to US merchants.
    paymentmethod The list of accepted card brands, comma separated (for example: “master,amex,visa,diners,discover,jcb,maestro”).
    checkoutid The Checkout ID from Mastercard, copied from the Masterpass section of the Dashboard

    Attach a click handler to the image and use it to invoke the masterpass.checkout function with the desired parameters:

    const button = document.getElementById('mpbutton'); button.addEventListener('click', (ev) => masterpass.checkout({ checkoutId: '{{MASTERPASS_CHECKOUT_ID}}', allowedCardTypes: ['master', 'amex', 'visa'], amount: '10.00', currency: 'USD', cartId: '{{UNIQUE_ID}}', callbackUrl: '{{CALLBACK_URL}}' }));

    The masterpass.checkout function requires the following parameters:

    Parameter Description
    checkoutId The Checkout ID for your Masterpass project, copied from the Dashboard
    allowedCardTypes A list of the Masterpass-compatible payment providers that you want to support
    amount The amount of the transaction, expressed in decimal format
    currency The currency to use for the transaction
    cartId A unique string that you generate to identify the purchase
    callbackUrl You can use this optional parameter to override the default callbackUrl configured when activating Masterpass.

    For more details about the masterpass.checkout function and the parameters that it accepts, refer to Mastercard’s documentation.

    Completing the payment

    When 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 to the specified callback URL when invoking masterpass.checkout function. It appends an oauth_verifier URL query parameter that your application can use to complete the transaction.

    In the route handler for the redirect destination, extract the URL query parameter and use it to create a source. Next, create a charge with the ID of the returned source. The following code example demonstrates how to create a SRC charge in Node.js with the Koa framework:

    router.get('/callback', async (ctx) => { const amount = 1000; const currency = 'usd'; const result = await stripe.sources.create({ type: 'card', currency, amount, card: { masterpass: { cart_id: '{{UNIQUE_ID}}', transaction_id: ctx.query.oauth_verifier } } }); const charge = await stripe.charges.create({ amount, currency, source: result.source.id }); ctx.body = '<h1>Charge succeeded</h1>'; });

    In the route handler for the redirect destination, extract the URL query parameter and use it to confirm the PaymentIntent that you have created at the beginning of the checkout flow. See Using Payment Intents on Web to learn how to manage your checkout flow using Payment Intents.

    The following code example demonstrates how to confirm a PaymentIntent with SRC in Node.js with the Koa framework:

    router.get('/callback', async (ctx) => { // retrieve the PaymentIntent ID created at the beginning of the checkout flow. const payment_intent_id = '{{PAYMENT_INTENT_ID}}'; const payment_intent = await stripe.paymentIntents.confirm(payment_intent_id, { payment_method_data: { type: 'card', card: { masterpass: { card_id: '{{UNIQUE_ID}}', transaction_id: ctx.query.oauth_verifier, }, }, }, }); ctx.body = '<h1>Charge succeeded</h1>'; });

    Use Mastercard’s SRC sandbox environment in Stripe’s test mode, and Mastercard’s SRC production environment in Stripe’s live mode. When creating the source, be sure to use the same unique value for the cart_id property that you used on your checkout page.

    Testing Secure Remote Commerce

    To test your SRC integration against Mastercard’s sandbox, create a new SRC user account during the checkout process on your website. Configure the account to use one of the test cards from the Masterpass documentation. Complete the checkout process as normal, selecting the test card as your payment method. If everything works correctly, Mastercard redirects you back to your application, which creates the charge as expected.

    Was this page helpful?

    Thank you for helping improve Stripe's documentation. If you need help or have any questions, please consider contacting support.

    On this page