From 5151d28bec5c97db92263b6c9fd17541782ca9d1 Mon Sep 17 00:00:00 2001 From: Jackie Osborn <92761831+jackieosborn-stripe@users.noreply.github.com> Date: Wed, 1 Mar 2023 17:43:02 -0600 Subject: [PATCH] Rename PayButtonElement to ExpressCheckoutElement (#424) * Rename PayButtonElement to ExpressCheckoutElement * Rename file --- tests/types/src/invalid.ts | 18 +- tests/types/src/valid.ts | 51 ++--- types/stripe-js/elements-group.d.ts | 22 +- ...{pay-button.d.ts => express-checkout.d.ts} | 193 ++++++++++-------- types/stripe-js/elements/index.d.ts | 2 +- 5 files changed, 155 insertions(+), 131 deletions(-) rename types/stripe-js/elements/{pay-button.d.ts => express-checkout.d.ts} (59%) diff --git a/tests/types/src/invalid.ts b/tests/types/src/invalid.ts index 6ad513fd..ac300bd8 100644 --- a/tests/types/src/invalid.ts +++ b/tests/types/src/invalid.ts @@ -5,7 +5,7 @@ import { StripeIbanElement, StripePaymentElement, StripeCartElement, - StripePayButtonElement, + StripeExpressCheckoutElement, } from '../../../types'; declare const stripe: Stripe; @@ -14,7 +14,7 @@ declare const cardElement: StripeCardElement; declare const ibanElement: StripeIbanElement; declare const paymentElement: StripePaymentElement; declare const cartElement: StripeCartElement; -declare const payButtonElement: StripePayButtonElement; +declare const expressCheckoutElement: StripeExpressCheckoutElement; elements.update({ // @ts-expect-error: `clientSecret` is not updatable @@ -79,35 +79,35 @@ cartElement.update({clientSecret: ''}); // @ts-expect-error: cartElement has no function `escape` cartElement.escape(); -payButtonElement.update({ +expressCheckoutElement.update({ // @ts-expect-error: `wallets` option can't be updated wallets: { applePay: 'never', }, }); -payButtonElement.update({ +expressCheckoutElement.update({ // @ts-expect-error: buttonTheme option can't be updated buttonTheme: { applePay: 'white-outline', }, }); -payButtonElement.update({ +expressCheckoutElement.update({ // @ts-expect-error: buttonType option can't be updated buttonType: { applePay: 'donate', }, }); -payButtonElement.on('shippingaddresschange', ({address}) => { +expressCheckoutElement.on('shippingaddresschange', ({address}) => { // @ts-expect-error Property 'line1' does not exist on type 'PartialAddress'. address.line1; // @ts-expect-error Property 'line2' does not exist on type 'PartialAddress'. address.line2; }); -payButtonElement.on('confirm', ({paymentFailed}) => { +expressCheckoutElement.on('confirm', ({paymentFailed}) => { // @ts-expect-error Can only fail a payment for a reason of 'fail' or 'invalid-shipping-address' paymentFailed({reason: 'pizza-time'}); }); @@ -136,14 +136,14 @@ elements.create('issuingCardCopyButton', { elements.create('cart'); // @ts-expect-error: `white-outline` is only supported by apple pay -elements.create('payButton', { +elements.create('expressCheckout', { buttonTheme: { googlePay: 'white-outline', }, }); // @ts-expect-error: `checkout` is only supported by google pay -elements.create('payButton', { +elements.create('expressCheckout', { buttonType: { applePay: 'checkout', }, diff --git a/tests/types/src/valid.ts b/tests/types/src/valid.ts index c1022027..cd12843e 100644 --- a/tests/types/src/valid.ts +++ b/tests/types/src/valid.ts @@ -49,10 +49,10 @@ import { StripeElementType, CanMakePaymentResult, VerificationSession, - StripePayButtonElementClickEvent, - StripePayButtonElementConfirmEvent, - StripePayButtonElementShippingAddressChangeEvent, - StripePayButtonElementShippingRateChangeEvent, + StripeExpressCheckoutElementClickEvent, + StripeExpressCheckoutElementConfirmEvent, + StripeExpressCheckoutElementShippingAddressChangeEvent, + StripeExpressCheckoutElementShippingRateChangeEvent, AvailablePaymentMethods, } from '../../../types'; @@ -749,9 +749,9 @@ const retrievedCartElement: StripeCartElement | null = elements.getElement( 'cart' ); -const payButtonElementDefault = elements.create('payButton'); +const expressCheckoutElementDefault = elements.create('expressCheckout'); -const payButtonElement = elements.create('payButton', { +const expressCheckoutElement = elements.create('expressCheckout', { buttonHeight: 55, layout: 'horizontal', paymentMethodOrder: ['apple_pay', 'google_pay'], @@ -769,7 +769,7 @@ const payButtonElement = elements.create('payButton', { }, }); -const payButtonElement2 = elements.create('payButton', { +const expressCheckoutElement2 = elements.create('expressCheckout', { layout: { type: 'auto', visibleButtonCount: 5, @@ -785,39 +785,42 @@ const payButtonElement2 = elements.create('payButton', { }, }); -payButtonElement +expressCheckoutElement .on( 'ready', (e: { - elementType: 'payButton'; + elementType: 'expressCheckout'; availablePaymentMethods: undefined | AvailablePaymentMethods; }) => {} ) - .on('click', (e: StripePayButtonElementClickEvent) => {}) - .on('focus', (e: {elementType: 'payButton'}) => {}) - .on('blur', (e: {elementType: 'payButton'}) => {}) - .on('escape', (e: {elementType: 'payButton'}) => {}) + .on('click', (e: StripeExpressCheckoutElementClickEvent) => {}) + .on('focus', (e: {elementType: 'expressCheckout'}) => {}) + .on('blur', (e: {elementType: 'expressCheckout'}) => {}) + .on('escape', (e: {elementType: 'expressCheckout'}) => {}) .on( 'loaderror', (e: { - elementType: 'payButton'; + elementType: 'expressCheckout'; error: { type: string; }; }) => {} ); -payButtonElement.on('confirm', ({paymentFailed}) => { +expressCheckoutElement.on('confirm', ({paymentFailed}) => { paymentFailed(); paymentFailed({}); paymentFailed({reason: 'invalid_shipping_address'}); }); -payButtonElement.on('cancel', (e: {elementType: 'payButton'}) => {}); +expressCheckoutElement.on( + 'cancel', + (e: {elementType: 'expressCheckout'}) => {} +); -payButtonElement.on( +expressCheckoutElement.on( 'shippingaddresschange', - (e: StripePayButtonElementShippingAddressChangeEvent) => { + (e: StripeExpressCheckoutElementShippingAddressChangeEvent) => { e.reject(); e.resolve(); e.resolve({ @@ -861,9 +864,9 @@ payButtonElement.on( } ); -payButtonElement.on( +expressCheckoutElement.on( 'shippingratechange', - (e: StripePayButtonElementShippingRateChangeEvent) => { + (e: StripeExpressCheckoutElementShippingRateChangeEvent) => { e.reject(); e.resolve(); e.resolve({ @@ -907,7 +910,7 @@ payButtonElement.on( } ); -const retrievedPayButtonElement = elements.getElement('payButton'); +const retrievedExpressCheckoutElement = elements.getElement('expressCheckout'); auBankAccountElement.destroy(); cardElement.destroy(); @@ -920,9 +923,9 @@ idealBankElement.destroy(); paymentRequestButtonElement.destroy(); linkAuthenticationElement.destroy(); shippingAddressElement.destroy(); -payButtonElementDefault.destroy(); -payButtonElement.destroy(); -payButtonElement2.destroy(); +expressCheckoutElementDefault.destroy(); +expressCheckoutElement.destroy(); +expressCheckoutElement2.destroy(); stripe.redirectToCheckout({sessionId: ''}); diff --git a/types/stripe-js/elements-group.d.ts b/types/stripe-js/elements-group.d.ts index 81c79982..11cdab49 100644 --- a/types/stripe-js/elements-group.d.ts +++ b/types/stripe-js/elements-group.d.ts @@ -47,8 +47,8 @@ import { StripeIssuingCardPinDisplayElementOptions, StripeIssuingCardCopyButtonElement, StripeIssuingCardCopyButtonElementOptions, - StripePayButtonElement, - StripePayButtonElementOptions, + StripeExpressCheckoutElement, + StripeExpressCheckoutElementOptions, } from './elements'; export interface StripeElements { @@ -367,19 +367,19 @@ export interface StripeElements { ): StripeLinkAuthenticationElement | null; ///////////////////////////// - /// payButton + /// expressCheckout ///////////////////////////// /** * Requires beta access: * Contact [Stripe support](https://support.stripe.com/) for more information. * - * Creates a `PayButtonElement`. + * Creates a `ExpressCheckoutElement`. */ create( - elementType: 'payButton', - options?: StripePayButtonElementOptions - ): StripePayButtonElement; + elementType: 'expressCheckout', + options?: StripeExpressCheckoutElementOptions + ): StripeExpressCheckoutElement; /** * Requires beta access: @@ -387,7 +387,9 @@ export interface StripeElements { * * Looks up a previously created `Element` by its type. */ - getElement(elementType: 'payButton'): StripePayButtonElement | null; + getElement( + elementType: 'expressCheckout' + ): StripeExpressCheckoutElement | null; ///////////////////////////// /// payment @@ -520,11 +522,11 @@ export type StripeElementType = | 'cardCvc' | 'cart' | 'epsBank' + | 'expressCheckout' | 'fpxBank' | 'iban' | 'idealBank' | 'p24Bank' - | 'payButton' | 'payment' | 'paymentMethodMessaging' | 'paymentRequestButton' @@ -551,7 +553,7 @@ export type StripeElement = | StripeIbanElement | StripeIdealBankElement | StripeP24BankElement - | StripePayButtonElement + | StripeExpressCheckoutElement | StripePaymentElement | StripePaymentMethodMessagingElement | StripePaymentRequestButtonElement diff --git a/types/stripe-js/elements/pay-button.d.ts b/types/stripe-js/elements/express-checkout.d.ts similarity index 59% rename from types/stripe-js/elements/pay-button.d.ts rename to types/stripe-js/elements/express-checkout.d.ts index 9d58d498..9a6dd02d 100644 --- a/types/stripe-js/elements/pay-button.d.ts +++ b/types/stripe-js/elements/express-checkout.d.ts @@ -1,184 +1,203 @@ import {StripeElementBase} from './base'; import {StripeError} from '../stripe'; -export type StripePayButtonElement = StripeElementBase & { +export type StripeExpressCheckoutElement = StripeElementBase & { /** * Triggered when the element is fully rendered and can accept `element.focus` calls. */ on( eventType: 'ready', - handler: (event: StripePayButtonElementReadyEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementReadyEvent) => any + ): StripeExpressCheckoutElement; once( eventType: 'ready', - handler: (event: StripePayButtonElementReadyEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementReadyEvent) => any + ): StripeExpressCheckoutElement; off( eventType: 'ready', - handler?: (event: StripePayButtonElementReadyEvent) => any - ): StripePayButtonElement; + handler?: (event: StripeExpressCheckoutElementReadyEvent) => any + ): StripeExpressCheckoutElement; /** * Triggered when a button on the element is clicked. */ on( eventType: 'click', - handler: (event: StripePayButtonElementClickEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementClickEvent) => any + ): StripeExpressCheckoutElement; once( eventType: 'click', - handler: (event: StripePayButtonElementClickEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementClickEvent) => any + ): StripeExpressCheckoutElement; off( eventType: 'click', - handler?: (event: StripePayButtonElementClickEvent) => any - ): StripePayButtonElement; + handler?: (event: StripeExpressCheckoutElementClickEvent) => any + ): StripeExpressCheckoutElement; /** * Triggered when the element gains focus. */ on( eventType: 'focus', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; once( eventType: 'focus', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; off( eventType: 'focus', - handler?: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler?: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; /** * Triggered when the element loses focus. */ on( eventType: 'blur', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; once( eventType: 'blur', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; off( eventType: 'blur', - handler?: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler?: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; /** * Triggered when the escape key is pressed within the element. */ on( eventType: 'escape', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; once( eventType: 'escape', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; off( eventType: 'escape', - handler?: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler?: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; /** * Triggered when the element fails to load. */ on( eventType: 'loaderror', - handler: (event: {elementType: 'payButton'; error: StripeError}) => any - ): StripePayButtonElement; + handler: (event: { + elementType: 'expressCheckout'; + error: StripeError; + }) => any + ): StripeExpressCheckoutElement; once( eventType: 'loaderror', - handler: (event: {elementType: 'payButton'; error: StripeError}) => any - ): StripePayButtonElement; + handler: (event: { + elementType: 'expressCheckout'; + error: StripeError; + }) => any + ): StripeExpressCheckoutElement; off( eventType: 'loaderror', - handler?: (event: {elementType: 'payButton'; error: StripeError}) => any - ): StripePayButtonElement; + handler?: (event: { + elementType: 'expressCheckout'; + error: StripeError; + }) => any + ): StripeExpressCheckoutElement; /** * Triggered when a buyer authorizes a payment within a supported payment method. */ on( eventType: 'confirm', - handler: (event: StripePayButtonElementConfirmEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementConfirmEvent) => any + ): StripeExpressCheckoutElement; once( eventType: 'confirm', - handler: (event: StripePayButtonElementConfirmEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementConfirmEvent) => any + ): StripeExpressCheckoutElement; off( eventType: 'confirm', - handler?: (event: StripePayButtonElementConfirmEvent) => any - ): StripePayButtonElement; + handler?: (event: StripeExpressCheckoutElementConfirmEvent) => any + ): StripeExpressCheckoutElement; /** * Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface) */ on( eventType: 'cancel', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; once( eventType: 'cancel', - handler: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; off( eventType: 'cancel', - handler?: (event: {elementType: 'payButton'}) => any - ): StripePayButtonElement; + handler?: (event: {elementType: 'expressCheckout'}) => any + ): StripeExpressCheckoutElement; /** * Triggered when a buyer selects a different shipping address. */ on( eventType: 'shippingaddresschange', - handler: (event: StripePayButtonElementShippingAddressChangeEvent) => any - ): StripePayButtonElement; + handler: ( + event: StripeExpressCheckoutElementShippingAddressChangeEvent + ) => any + ): StripeExpressCheckoutElement; once( eventType: 'shippingaddresschange', - handler: (event: StripePayButtonElementShippingAddressChangeEvent) => any - ): StripePayButtonElement; + handler: ( + event: StripeExpressCheckoutElementShippingAddressChangeEvent + ) => any + ): StripeExpressCheckoutElement; off( eventType: 'shippingaddresschange', - handler?: (event: StripePayButtonElementShippingAddressChangeEvent) => any - ): StripePayButtonElement; + handler?: ( + event: StripeExpressCheckoutElementShippingAddressChangeEvent + ) => any + ): StripeExpressCheckoutElement; /** * Triggered when a buyer selects a different shipping rate. */ on( eventType: 'shippingratechange', - handler: (event: StripePayButtonElementShippingRateChangeEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementShippingRateChangeEvent) => any + ): StripeExpressCheckoutElement; once( eventType: 'shippingratechange', - handler: (event: StripePayButtonElementShippingRateChangeEvent) => any - ): StripePayButtonElement; + handler: (event: StripeExpressCheckoutElementShippingRateChangeEvent) => any + ): StripeExpressCheckoutElement; off( eventType: 'shippingratechange', - handler?: (event: StripePayButtonElementShippingRateChangeEvent) => any - ): StripePayButtonElement; + handler?: ( + event: StripeExpressCheckoutElementShippingRateChangeEvent + ) => any + ): StripeExpressCheckoutElement; /** - * Updates the options the `PayButtonElement` was initialized with. + * Updates the options the `ExpressCheckoutElement` was initialized with. * Updates are merged into the existing configuration. */ - update(options: StripePayButtonElementUpdateOptions): StripePayButtonElement; + update( + options: StripeExpressCheckoutElementUpdateOptions + ): StripeExpressCheckoutElement; }; -export type PaymentMethodType = 'google_pay' | 'apple_pay'; +export type PaymentMethodType = 'google_pay' | 'apple_pay' | 'link'; -export type PayButtonPartialAddress = { +export type ExpressCheckoutPartialAddress = { city: string; state: string; postal_code: string; country: string; }; -export type PayButtonAddress = PayButtonPartialAddress & { +export type ExpressCheckoutAddress = ExpressCheckoutPartialAddress & { line1: string; line2: string | null; }; @@ -187,12 +206,12 @@ export type BillingDetails = { name: string; email?: string; phone?: string; - address: PayButtonAddress; + address: ExpressCheckoutAddress; }; export type ShippingAddress = { name: string; - address: PayButtonAddress; + address: ExpressCheckoutAddress; }; export type LineItem = { @@ -226,11 +245,11 @@ export type LayoutOption = visibleButtonCount?: number; }; -export type PayButtonWalletOption = 'always' | 'auto' | 'never'; +export type ExpressCheckoutWalletOption = 'always' | 'auto' | 'never'; -export type PayButtonWalletsOption = { - applePay?: PayButtonWalletOption; - googlePay?: PayButtonWalletOption; +export type ExpressCheckoutWalletsOption = { + applePay?: ExpressCheckoutWalletOption; + googlePay?: ExpressCheckoutWalletOption; }; export type ApplePayButtonTheme = 'black' | 'white' | 'white-outline'; @@ -273,7 +292,7 @@ export type ButtonTypeOption = { googlePay?: GooglePayButtonType; }; -export interface StripePayButtonElementOptions { +export interface StripeExpressCheckoutElementOptions { /** * Manually sets the height of the buttons shown. */ @@ -295,21 +314,21 @@ export interface StripePayButtonElementOptions { layout?: LayoutOption; /** - * Override the order in which payment methods are displayed in the Pay Button Element. - * By default, the Pay Button Element will use a dynamic ordering that optimizes payment method display for each user. + * Override the order in which payment methods are displayed in the Express Checkout Element. + * By default, the Express Checkout Element will use a dynamic ordering that optimizes payment method display for each user. */ paymentMethodOrder?: string[]; /** - * Control wallets display in the Pay Button Element. + * Control wallets display in the Express Checkout Element. */ - wallets?: PayButtonWalletsOption; + wallets?: ExpressCheckoutWalletsOption; } /* * Updatable options for an `Elements` instance */ -export interface StripePayButtonElementUpdateOptions { +export interface StripeExpressCheckoutElementUpdateOptions { /** * Manually sets the height of the buttons shown. */ @@ -322,7 +341,7 @@ export interface StripePayButtonElementUpdateOptions { /** * Override the order in which payment methods are displayed in the Pay Button Element. - * By default, the Pay Button Element will use a dynamic ordering that optimizes payment method display for each user. + * By default, the Express Checkout Element will use a dynamic ordering that optimizes payment method display for each user. */ paymentMethodOrder?: string[]; } @@ -332,11 +351,11 @@ export type AvailablePaymentMethods = { googlePay: boolean; }; -export interface StripePayButtonElementReadyEvent { +export interface StripeExpressCheckoutElementReadyEvent { /** * The type of element that emitted this event. */ - elementType: 'payButton'; + elementType: 'expressCheckout'; /** * The list of payment methods that could possibly show in the element, or undefined if no payment methods can show. @@ -395,11 +414,11 @@ export type ClickResolveDetails = { applePay?: ApplePayOption; }; -export interface StripePayButtonElementClickEvent { +export interface StripeExpressCheckoutElementClickEvent { /** * The type of element that emitted this event. */ - elementType: 'payButton'; + elementType: 'expressCheckout'; /** * The payment method associated with the button that was clicked. @@ -413,7 +432,7 @@ export interface StripePayButtonElementClickEvent { resolve: (resolveDetails?: ClickResolveDetails) => void; } -export interface StripePayButtonElementConfirmEvent { +export interface StripeExpressCheckoutElementConfirmEvent { /** * Callback when a payment is unsuccessful. Optionally, specifying a reason will show a more detailed error in the payment interface. */ @@ -435,14 +454,14 @@ export type ChangeResolveDetails = { shippingRates?: Array; }; -export interface StripePayButtonElementShippingAddressChangeEvent { +export interface StripeExpressCheckoutElementShippingAddressChangeEvent { name: string; - address: PayButtonPartialAddress; + address: ExpressCheckoutPartialAddress; resolve: (resolveDetails?: ChangeResolveDetails) => void; reject: () => void; } -export interface StripePayButtonElementShippingRateChangeEvent { +export interface StripeExpressCheckoutElementShippingRateChangeEvent { shippingRate: ShippingRate; resolve: (resolveDetails?: ChangeResolveDetails) => void; reject: () => void; diff --git a/types/stripe-js/elements/index.d.ts b/types/stripe-js/elements/index.d.ts index d0ac7b7c..75fb90b9 100644 --- a/types/stripe-js/elements/index.d.ts +++ b/types/stripe-js/elements/index.d.ts @@ -10,12 +10,12 @@ export * from './card-number'; export * from './card'; export * from './cart'; export * from './eps-bank'; +export * from './express-checkout'; export * from './fpx-bank'; export * from './iban'; export * from './ideal-bank'; export * from './link-authentication'; export * from './p24-bank'; -export * from './pay-button'; export * from './payment-request-button'; export * from './payment'; export * from './shipping-address';