Add preferredNetwork option

tests/types/src/invalid.ts

@@ -1,6 +1,7 @@
 import {
   Stripe,
   StripeCardElement,
+  StripeCardNumberElement,
   StripeIbanElement,
   StripePaymentElement,
   StripeCartElement,
@@ -11,6 +12,7 @@ import {ApplePayUpdateOption} from '../../../types/stripe-js/elements/apple-pay'
 
 declare const stripe: Stripe;
 declare const cardElement: StripeCardElement;
+declare const cardNumberElement: StripeCardNumberElement;
 declare const ibanElement: StripeIbanElement;
 declare const paymentElement: StripePaymentElement;
 declare const cartElement: StripeCartElement;
@@ -52,11 +54,42 @@ elements.update({
   },
 });
 
+// invalid value for 'preferredNetwork'
+// @ts-expect-error: No overload matches this call
+elements.create('cardNumber', {preferredNetwork: ['invalid_network']});
+
+// invalid value for 'preferredNetwork'
+// @ts-expect-error: No overload matches this call
+elements.create('card', {preferredNetwork: ['invalid_network']});
+
+// invalid type for 'preferredNetwork'
+// @ts-expect-error: No overload matches this call
+elements.create('cardNumber', {preferredNetwork: 'cartes_bancaires'});
+
+// invalid type for 'preferredNetwork'
+// @ts-expect-error: No overload matches this call
+elements.create('card', {preferredNetwork: 'cartes_bancaires'});
+
 cardElement.update({
   // @ts-expect-error: 'disableLink' does not exist in type 'StripeCardElementUpdateOptions'
   disableLink: false,
 });
 
+cardNumberElement.update({
+  // @ts-expect-error: 'disableLink' does not exist in type 'StripeCardNumberElementUpdateOptions'
+  disableLink: false,
+});
+
+cardElement.update({
+  // @ts-expect-error: 'preferredNetwork' does not exist in type 'StripeCardElementUpdateOptions'
+  preferredNetwork: ['cartes_bancaires'],
+});
+
+cardNumberElement.update({
+  // @ts-expect-error: 'preferredNetwork' does not exist in type 'StripeCardNumberElementUpdateOptions'
+  preferredNetwork: ['cartes_bancaires'],
+});
+
 paymentElement.on('change', (e) => {
   // @ts-expect-error: `error` is not present on PaymentElement "change" event.
   if (e.error) {

tests/types/src/valid.ts

@@ -238,6 +238,10 @@ const cardElement: StripeCardElement = elements.create('card', {
   disableLink: false,
 });
 
+elements.create('card', {preferredNetwork: undefined});
+
+elements.create('card', {preferredNetwork: ['cartes_bancaires', 'accel']});
+
 elements.create('card', {style: {base: {fontWeight: 500}}});
 
 const cardElementDefaults: StripeCardElement = elements.create('card');
@@ -252,9 +256,16 @@ const cardNumberElement: StripeCardNumberElement = elements.create(
     style: MY_STYLE,
     showIcon: true,
     iconStyle: 'solid',
+    disableLink: false,
   }
 );
 
+elements.create('cardNumber', {preferredNetwork: undefined});
+
+elements.create('cardNumber', {
+  preferredNetwork: ['cartes_bancaires', 'accel'],
+});
+
 elements.create('cardNumber', {style: {base: {fontWeight: 500}}});
 elements.create('cardCvc', {style: {base: {fontWeight: 500}}});
 elements.create('cardExpiry', {style: {base: {fontWeight: 500}}});

types/stripe-js/elements-group.d.ts

@@ -617,6 +617,26 @@ export type StripeElementLocale =
   | 'zh-HK'
   | 'zh-TW';
 
+export type CardNetworkBrand =
+  | 'accel'
+  | 'amex'
+  | 'carnet'
+  | 'cartes_bancaires'
+  | 'diners'
+  | 'discover'
+  | 'eftpos_au'
+  | 'elo'
+  | 'girocard'
+  | 'interac'
+  | 'jcb'
+  | 'mastercard'
+  | 'nyce'
+  | 'pulse'
+  | 'rupay'
+  | 'star'
+  | 'unionpay'
+  | 'visa';
+
 type PaymentMethodOptions = {
   card?: {require_cvc_recollection?: boolean};
   us_bank_account?: {

types/stripe-js/elements/card-number.d.ts

@@ -4,6 +4,7 @@ import {
   StripeElementClasses,
   StripeElementChangeEvent,
 } from './base';
+import {CardNetworkBrand} from '../elements-group';
 
 export type StripeCardNumberElement = StripeElementBase & {
   /**
@@ -109,7 +110,7 @@ export type StripeCardNumberElement = StripeElementBase & {
    * The styles of an `Element` can be dynamically changed using `element.update`.
    * This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
    */
-  update(options: Partial<StripeCardNumberElementOptions>): void;
+  update(options: Partial<StripeCardNumberElementUpdateOptions>): void;
 };
 
 export interface StripeCardNumberElementOptions {
@@ -135,6 +136,44 @@ export interface StripeCardNumberElementOptions {
    * Appearance of the brand icon in the Element.
    */
   iconStyle?: 'default' | 'solid';
+
+  /**
+   * Hides and disables the Link Button in the Card Element.
+   * Default is false.
+   */
+  disableLink?: boolean;
+
+  /**
+   * The preferred card network order for the Card Brand Choice dropdown. Specifying a value for this
+   * parameter will result in the most preferred network being selected by default in the dropdown.
+   * Defaults to the automatic network ordering if no value is specified.
+   */
+  preferredNetwork?: Array<CardNetworkBrand>;
+}
+
+export interface StripeCardNumberElementUpdateOptions {
+  classes?: StripeElementClasses;
+
+  style?: StripeElementStyle;
+
+  placeholder?: string;
+
+  /**
+   * Applies a disabled state to the Element such that user input is not accepted.
+   * Default is false.
+   */
+  disabled?: boolean;
+
+  /**
+   * Show a card brand icon in the Element.
+   * Default is `false`.
+   */
+  showIcon?: boolean;
+
+  /**
+   * Appearance of the brand icon in the Element.
+   */
+  iconStyle?: 'default' | 'solid';
 }
 
 export interface StripeCardNumberElementChangeEvent

types/stripe-js/elements/card.d.ts

@@ -4,6 +4,7 @@ import {
   StripeElementClasses,
   StripeElementChangeEvent,
 } from './base';
+import {CardNetworkBrand} from '../elements-group';
 
 export type StripeCardElement = StripeElementBase & {
   /**
@@ -152,6 +153,13 @@ export interface StripeCardElementOptions {
    * Default is false.
    */
   disableLink?: boolean;
+
+  /**
+   * The preferred card network order for the Card Brand Choice dropdown. Specifying a value for this
+   * parameter will result in the most preferred network being selected by default in the dropdown.
+   * Defaults to the automatic network ordering if no value is specified.
+   */
+  preferredNetwork?: Array<CardNetworkBrand>;
 }
 
 export interface StripeCardElementUpdateOptions {