Co-badged cards compliance
Learn about EU regulations requiring customer choice for co-badged cards.
Does this regulation apply to me?
Regulation (EU) 2015/751 applies to all businesses in the EEA that can process Cartes Bancaires. Sign in and return to this section to view if co-badged card regulation applies to you.
Applicable in:
Regulatory requirements
Regulation (EU) 2015/751 requires businesses in the European Economic Area (EEA) to honour customers’ card brand choice for co-badged cards (for example, Cartes Bancaires cards co-badged with Visa). In practice, this means you must enable cardholders to select a preferred card brand within your checkout form in accordance with these guidelines:
- Display the available card networks in your checkout form: All available card networks must be clearly identified during the checkout process. The visual quality, clarity, and size of the brand logos must be consistent, and it should be clear to cardholders how to select a card network.
- Abide by the cardholder’s preferred card network: Where the cardholder chooses their preferred card network, you must use it when confirming a payment or storing card details for future use. If the cardholder doesn’t make a choice, you can choose your card network for the transaction.
- Allow updates to the preferred card network: You must present cardholders updating their payment methods that are saved for future use with the option to change their preferred card network when they’re updating their payment details. For example, you can provide a customer portal for managing saved payment methods.
When regulation applies
Cartes Bancaires co-badged cards are the only Stripe-supported cards that fall under this regulation. As a result, Regulation (EU) 2015/751 applies to businesses that:
- Are in the EEA
- Can process Cartes Bancaires
Connect users
In Connect integrations, the merchant of record on a transaction is the business we use to determine if co-badged regulation applies. Depending on the Connect integration, this can either be the Platform or the Connected account.
Businesses that meet the above criteria are required to present customers with a choice of card network for all transactions that can processed with Cartes Bancaires. A transaction is eligible for Cartes Bancaires if:
- The business can process Cartes Bancaires
- The currency is EUR
- The payment method is a co-badged Cartes Bancaires card
Using test mode
Cartes Bancaires is always enabled in test mode. As a result, you might see the network selector on Stripe-hosted UIs in test mode even if you don’t enable Cartes Bancaires. This allows you to preview how Stripe-hosted UIs might handle co-badged cards if Cartes Bancaires was enabled.
Integration guides
Stripe-hosted UIs, such as Checkout, Payment Links, and Elements, will automatically display a network selector when you meet the applicability criteria above, if configured according to the following guides. You can migrate to a Stripe-hosted UI to use these features.
For other integrations, you’re fully responsible for making sure your integration complies with the regulation requirements.
If you maintain a custom checkout integration and have access to raw card data APIs, Stripe provides you with tools to make your integration compliant with card brand choice regulations.
You can use the stripe. method in Stripe.js to identify available networks for customer card numbers, to determine if you must display network preference controls for them.
Load and initialise Stripe.js
Make sure Stripe.js is installed on your website. Always load Stripe.js from js.stripe.com to remain compliant. Don’t include the script in a bundle or host it yourself.
<!-- Somewhere in your site's <head> --> <script src="https://js.stripe.com/v3"></script>
const stripe = Stripe("pk_test_TYooMQauvdEDq54NiTphI7jx");
You can also import our thin wrapper package, @stripe/stripe-js, to load Stripe.js dynamically in your checkout flow.
import {loadStripe} from '@stripe/stripe-js/pure'; // Stripe.js won't load until `loadStripe` is called const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
Retrieve available networks for card numbers
Update your current card number event handler to call stripe. as customers enter their card details. The method returns an object with a single property, networks, which will either be null or an array of network types.
After your customer has typed 8+ digits of their card number, the method starts returning available networks for the card.
const {networks} = await stripe.retrieveCardNetworks(rawCardNumber)
Render network preference selection to your customers
After identifying available networks with stripe., determine if you need to show a selector for your customer to choose their preferred card brand. When only a single network is recognised, you don’t need to show a network selector and can show a single recognised card brand instead. When multiple networks are recognised, show a selector for your customer to choose their preferred card brand. How you implement this UI is up to you, but it’s important to make sure all network options are treated with equal visual priority.
Note
If you’re displaying card brand icons today, it’s likely that you’re immediately identifying brands after one or two numbers are typed in. In supporting card brand choice, change this behaviour by delaying presentation of recognised brands until you receive a response from stripe..
Changing this behaviour avoids a scenario such as presenting Visa immediately, then eventually showing a co-badged network selection after co-badged networks are detected.
Pass the network preference to the Stripe API
Update your payment flow to pass along the customer network preference.
For PaymentMethods, pass the network preference to the card[networks][preferred] parameter.
await stripe.paymentMethods.create({ type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, });
For Tokens, pass the network preference to the card[networks][preferred] parameter.
await stripe.tokens.create({ card: { // ...other card data networks: { preferred: networkSelection }, });
For PaymentIntents or SetupIntents, pass the network preference to the payment_ parameter.
await stripe.paymentIntent.create({ // ...other Payment Intent data payment_method_data: { type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, } }); await stripe.paymentIntent.update({ // ...other Payment Intent data payment_method_data: { type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, } }); await stripe.paymentIntent.confirm({ // ...other Payment Intent data payment_method_data: { type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, } }); await stripe.setupIntent.create({ // ...other Setup Intent data payment_method_data: { type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, } }); await stripe.setupIntent.update({ // ...other Setup Intent data payment_method_data: { type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, } }); await stripe.setupIntent.confirm({ // ...other Setup Intent data payment_method_data: { type: 'card', card: { // ...other card data networks: { preferred: networkSelection }, } });
Note
The Sources API is deprecated and doesn’t support storing the customer preference. To comply with EU requirements, upgrade your Sources integration to use the Payment Methods API.
Identifying network used to process a charge
The charge object associated with a successful payment contains a network field indicating which card network the payment was processed on:
{ "id": "ch_1Ff52K2eZvKYlo2CWe10i0s7", "object": "charge", ... "payment_method_details": { "card": { "brand": "visa", ... "network": "cartes_bancaires", }, "type": "card" } }
Testing
You can use the following co-badged cards to test your integration: