Enable card brand choice

[allie500]

Description

Currently it is not possible for a customer to choose which card brand they want to use when paying with a co-branded card. When using a co-branded card, a customer should have the option to select which brand they want to run the payment through. The feature should also allow a merchant to set a default brand to use if the customer doesn't make a choice.

For additional information, please see Stripe's card brand choice documentation. This documentation includes details for implementing card brand choice within payment elements. At the bottom of the doc, you will find two co-brand test cards for testing during development.

Notice the dropdown arrow next to the card brand icon in the card number field in the Stripe payment element:

Acceptance criteria

• Ability to choose: If a co-branded credit card is entered into the payment element, a dropdown arrow should be active next to the card brand icon to allow for a shopper to select which card brand they prefer the payment to be processed through.

Designs

See the above image taken from the Stripe documentation as some initial inspiration.

Testing instructions

After adding this feature the following test should pass.

1. Go to your test store, add an item to your card, go to the checkout page.
2. Enter shopper info in the required fields.
3. In the card number field within the UPE, input this co-brand test card number: 4000 0025 0000 1001.
4. Use the dropdown arrow next to the card brand icon to select Cartes Bancaires.
5. Place the order.
6. Login to the Stripe Dashboard and view the payment event data.
7. The charge object associated with a successful payment intent 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",
      "three_d_secure": null,
      "wallet": null
    },
    "type": "card"
  }
}

Dev notes

None at this time.

Additional context

This feature request is similar to the one I made on Friday in the Woo Stripe Gateway: https://github.com/woocommerce/woocommerce-gateway-stripe/issues/2844

Both of these feature requests have been made in relation to a merchant request.

Slack thread: p1705610246121619-slack-C7U3Y3VMY

Merchant ticket: 7598919-zd-a8c

[zmaglica]

Based on the provided P2, this issue belongs to Quark team, so I will move it to the Others Team queue @diegocurbelo

[diegocurbelo]

Based on the provided P2, this issue belongs to Quark team, so I will move it to the Others Team queue @diegocurbelo

Hey @zmaglica! This same problem is present in the Stripe Gateway plugin and tracked here: https://github.com/woocommerce/woocommerce-gateway-stripe/issues/2844, but this specific issue is to track the fix in the WooPayments extension.

[csmcneill]

We received communications from Stripe related to this issue on 13 February 2024 (emphasis mine):

A number of your Stripe accounts are currently processing card payments through Cartes Bancaires, which is often co-branded with Visa or Mastercard. EU regulations relating to co-branded card payments may require you to update your integration, depending on the Stripe products you use to accept payments.

Specifically, the regulations state that customers must be able to choose their preferred card brand when paying with co-branded cards. You will need to take steps to ensure your integration offers this choice to your customers.

Note that continued non-compliance with these rules can result in fines, penalties, and other actions from card networks, regulators, and Stripe, so it’s important to confirm that your account is compliant as soon as possible, but no later than September 2024.

[gpressutto5]

Please add your planning poker estimate with Zenhub @FangedParakeet

[gpressutto5]

@csmcneill Did this Stripe communication refer to WooPayments? Since we switched entirely to UPE, we use Payment Element for all payments. Stripe renders this Payment Element, so it already supports cobranded cards, as you can test in this Jurassic Ninja store. The only catch is that you need to use a French account and use EUR for this to be consistently available. Other countries in the EEA require processing 50 EUR LIVE before Cartes Bancaires is enabled. Any country not part of the EEA does not support Cartes Bancaires, so the brands dropdown is never rendered.

That said, I found two minor issues with Cartes Bancaires:

Payment method is not handled in the order confirmation page

Saved cards always display Visa/MasterCard, even when it is CB (the payment is processed using the correct brand)

These two issues can be resolved by adding support to the yet to be merged native WC co-branded card support: woocommerce/woocommerce#45903 (This PR is not required)

[csmcneill]

Did this Stripe communication refer to WooPayments?

@gpressutto5 Great question! This communication did not specify WooPayments — it seemed like a more general advisement for all of our accounts. Melanie P2'd this at pbUcTB-4hj-p2 but I'm not sure if this would need any additional work once https://github.com/woocommerce/woocommerce/pull/45903 is released as a part of WooCommerce Core.

From the JN site you shared, it does appear as though card brand selection is rendered in the payment element when using a cobranded test card (4000002500001001):

[gpressutto5]

I think we should remove this feature from the Acceptance Criteria:

Default brand: If a co-branded credit card is entered into the payment element, the card should default to the brand selected by the merchant.

Stripe states that "it’s important to make sure all network options are treated with equal visual priority". What do you think @allie500?

[allie500]

I think we should remove this feature from the Acceptance Criteria:

Default brand: If a co-branded credit card is entered into the payment element, the card should default to the brand selected by the merchant.

Stripe states that "it’s important to make sure all network options are treated with equal visual priority". What do you think @allie500?

Yea, I think it makes sense to drop that criteria. It's been a while since I made this issue and to be honest, I don't remember why I put that criteria there or where I pulled it from.