From afee569d670fa6c0d1d724a011c0b6259019358a Mon Sep 17 00:00:00 2001 From: martinalong-stripe <102928571+martinalong-stripe@users.noreply.github.com> Date: Thu, 11 Jan 2024 14:57:32 -0800 Subject: [PATCH] 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 | 33 +++++++++++++++++ tests/types/src/valid.ts | 11 ++++++ types/stripe-js/elements-group.d.ts | 20 ++++++++++ types/stripe-js/elements/card-number.d.ts | 45 ++++++++++++++++++++++- types/stripe-js/elements/card.d.ts | 16 ++++++-- 5 files changed, 120 insertions(+), 5 deletions(-) diff --git a/tests/types/src/invalid.ts b/tests/types/src/invalid.ts index bb5b574e..625bdb39 100644 --- a/tests/types/src/invalid.ts +++ b/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) { diff --git a/tests/types/src/valid.ts b/tests/types/src/valid.ts index bac5abdc..87f15a74 100644 --- a/tests/types/src/valid.ts +++ b/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}}}); diff --git a/types/stripe-js/elements-group.d.ts b/types/stripe-js/elements-group.d.ts index bcefce0a..667d358b 100644 --- a/types/stripe-js/elements-group.d.ts +++ b/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?: { diff --git a/types/stripe-js/elements/card-number.d.ts b/types/stripe-js/elements/card-number.d.ts index d35736cc..fb631079 100644 --- a/types/stripe-js/elements/card-number.d.ts +++ b/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): void; + update(options: Partial): 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; +} + +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; diff --git a/types/stripe-js/elements/card.d.ts b/types/stripe-js/elements/card.d.ts index 23b7b1f1..82297a29 100644 --- a/types/stripe-js/elements/card.d.ts +++ b/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; } 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; }