Add preferredNetwork option (#537)

* Add disableLink to cardNumber element

We forgot to do this when adding Link to split card

* Add preferredNetwork property

* Run lint

* suggested edits from keno

* More suggestions from keno and add default case

* Reword slightly

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 {
@@ -121,7 +122,47 @@ export interface StripeCardNumberElementOptions {
 
   /**
    * Applies a disabled state to the Element such that user input is not accepted.
-   * Default is false.
+   * 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';
+
+  /**
+   * Hides and disables the Link Button in the Card Element.
+   * Default is `false`.
+   */
+  disableLink?: boolean;
+
+  /**
+   * Specifies a network preference for Card Brand Choice. The first network in the array which is a valid
+   * network on the entered card will be selected as the default in the Card Brand Choice dropdown upon
+   * entry of a co-branded card.
+   *
+   * Default is an empty array, meaning no default selection will be made in the Card Brand choice dropdown.
+   */
+  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;
 

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 & {
   /**
@@ -143,15 +144,24 @@ export interface StripeCardElementOptions {
 
   /**
    * Applies a disabled state to the Element such that user input is not accepted.
-   * Default is false.
+   * Default is `false`.
    */
   disabled?: boolean;
 
   /**
    * Hides and disables the Link Button in the Card Element.
-   * Default is false.
+   * Default is `false`.
    */
   disableLink?: boolean;
+
+  /**
+   * Specifies a network preference for Card Brand Choice. The first network in the array which is a valid
+   * network on the entered card will be selected as the default in the Card Brand Choice dropdown upon
+   * entry of a co-branded card.
+   *
+   * Default is an empty array, meaning no default selection will be made in the Card Brand choice dropdown.
+   */
+  preferredNetwork?: Array<CardNetworkBrand>;
 }
 
 export interface StripeCardElementUpdateOptions {
@@ -185,7 +195,7 @@ export interface StripeCardElementUpdateOptions {
 
   /**
    * Applies a disabled state to the Element such that user input is not accepted.
-   * Default is false.
+   * Default is `false`.
    */
   disabled?: boolean;
 }