Rename PayButtonElement to ExpressCheckoutElement (#424)

* Rename PayButtonElement to ExpressCheckoutElement * Rename file
stripe · Mar 1, 2023 · 5151d28 · 5151d28
1 parent dd9ce6d
commit 5151d28
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 131 deletions.
diff --git 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
@@ -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
@@ -47,8 +47,8 @@ import {
   StripeIssuingCardPinDisplayElementOptions,
   StripeIssuingCardCopyButtonElement,
   StripeIssuingCardCopyButtonElementOptions,
-  StripePayButtonElement,
-  StripePayButtonElementOptions,
+  StripeExpressCheckoutElement,
+  StripeExpressCheckoutElementOptions,
 } from './elements';
 
 export interface StripeElements {
@@ -367,27 +367,29 @@ 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:
    * Contact [Stripe support](https://support.stripe.com/) for more information.
    *
    * 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