Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
About Stripe payments
Upgrade your integration
Payments analytics
Online payments
OverviewFind your use caseManaged Payments
Use Payment Links
Build a checkout page
Build an advanced integration
Build an in-app integration
Payment methods
Add payment methods
    Overview
    Payment method integration options
    Manage default payment methods in the Dashboard
    Payment method types
    Cards
    Bank debits
    Bank redirects
    Bank transfers
    Credit transfers (Sources)
    Buy now, pay later
    Real-time payments
    Vouchers
    Wallets
      Alipay
      Amazon Pay
      Apple Pay
      Cash App Pay
      Google Pay
      GrabPay
      Link
      MB WAY
      MobilePay
      PayPal
      PayPay
      Revolut Pay
      Satispay
      Secure Remote Commerce
      Vipps
      WeChat Pay
    Enable local payment methods by country
    Custom payment methods
Manage payment methods
Faster checkout with Link
Payment interfaces
Payment Links
Checkout
Web Elements
In-app Elements
Payment scenarios
Custom payment flows
Flexible acquiring
Orchestration
In-person payments
Terminal
Other Stripe products
Financial Connections
Crypto
Climate
HomePaymentsAdd payment methodsWallets

Secure Remote Commerce program guide

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

Copy page

Use Secure Remote Commerce (SRC) to securely pay online, and use the global payments industry to protect your payment information. Users can add cards from Visa, Mastercard, American Express, and Discover to enable Click to Pay. SRC supports all participating network brands.

Note

Before implementing, refer to the implementation requirements. By using Secure Remote Commerce through Stripe, you agree to the Operating Rules. Mastercard offers SRC through its Masterpass platform.

Integrate the Secure Remote Commerce button

Warning

Mastercard has deprecated Masterpass. As a result, new Masterpass Checkout IDs can’t be generated in the Dashboard. We are working to re-enable Secure Remote Commerce onboarding.

Need to upgrade?

If you’re using Visa Checkout or Masterpass to accept payments, we recommend migrating these integrations to SRC, which provides a unified checkout process that supports a number of card brands.

To get started, generate your Masterpass Checkout ID in the Dashboard and configure your sandbox and production callback URLs. Mastercard offers SRC as an update to their Masterpass service.

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>
ParameterDescription
localeThe country (and language) of the business. en_US is the only valid value because SRC is only available to US businesses.
checkoutidThe Checkout ID from Mastercard, copied from the Masterpass section of the Dashboard.

To display the Masterpass button with black text, use the following image:

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

To display the Masterpass button with white text, use the following image:

<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>
ParameterDescription
localeThe country (and language) of the business. en_US is the only valid value because SRC is only available to US businesses.
paymentmethodThe list of accepted card brands, comma separated (for example: “master,amex,visa,diners,discover,jcb,maestro”).
checkoutidThe 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:

ParameterDescription
checkoutIdThe Checkout ID for your Masterpass project, copied from the Dashboard.
allowedCardTypesA list of the Masterpass-compatible payment providers that you want to support.
amountThe amount of the transaction, expressed in decimal format.
currencyThe currency to use for the transaction.
cartIdA unique string that you generate to identify the purchase.
callbackUrlUse 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.

Complete 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 confirm the PaymentIntent that you have created at the beginning of the checkout flow. See accept a payment 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 Express framework:

app.get('/callback', async (req, res) => { // 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, { amount: 1000, currency: 'usd', payment_method_data: { type: 'card', card: { masterpass: { cart_id: '{{UNIQUE_ID}}', transaction_id: req.query.oauth_verifier, }, }, }, }); res.send('<h1>Charge succeeded</h1>'); });

Test 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.

The SRC integration only works correctly when included on an http or https page. Stripe doesn’t support serving from the filesystem, even during testing.

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc