@stripe/stripe-js 2.2.2 → 2.4.0

package/dist/pure.esm.js

@@ -54,7 +54,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "2.2.2",
+    version: "2.4.0",
     startTime: startTime
   });
 };

package/dist/pure.js

@@ -58,7 +58,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "2.2.2",
+    version: "2.4.0",
     startTime: startTime
   });
 };

package/dist/stripe.esm.js

@@ -38,7 +38,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "2.2.2",
+    version: "2.4.0",
     startTime: startTime
   });
 };
@@ -130,15 +130,29 @@ var initStripe = function initStripe(maybeStripe, args, startTime) {
   return stripe;
 }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
+var stripePromise$1;
+var loadCalled = false;
+
+var getStripePromise = function getStripePromise() {
+  if (stripePromise$1) {
+    return stripePromise$1;
+  }
+
+  stripePromise$1 = loadScript(null)["catch"](function (error) {
+    // clear cache on error
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+  return stripePromise$1;
+}; // Execute our own script injection after a tick to give users time to do their
 // own script injection.
 
-var stripePromise$1 = Promise.resolve().then(function () {
-  return loadScript(null);
-});
-var loadCalled = false;
-stripePromise$1["catch"](function (err) {
+
+Promise.resolve().then(function () {
+  return getStripePromise();
+})["catch"](function (error) {
   if (!loadCalled) {
-    console.warn(err);
+    console.warn(error);
   }
 });
 var loadStripe = function loadStripe() {
@@ -147,8 +161,9 @@ var loadStripe = function loadStripe() {
   }
 
   loadCalled = true;
-  var startTime = Date.now();
-  return stripePromise$1.then(function (maybeStripe) {
+  var startTime = Date.now(); // if previous attempts are unsuccessful, will re-load script
+
+  return getStripePromise().then(function (maybeStripe) {
     return initStripe(maybeStripe, args, startTime);
   });
 };

package/dist/stripe.js

@@ -42,7 +42,7 @@ var registerWrapper = function registerWrapper(stripe, startTime) {
 
   stripe._registerWrapper({
     name: 'stripe-js',
-    version: "2.2.2",
+    version: "2.4.0",
     startTime: startTime
   });
 };
@@ -134,15 +134,29 @@ var initStripe = function initStripe(maybeStripe, args, startTime) {
   return stripe;
 }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
+var stripePromise$1;
+var loadCalled = false;
+
+var getStripePromise = function getStripePromise() {
+  if (stripePromise$1) {
+    return stripePromise$1;
+  }
+
+  stripePromise$1 = loadScript(null)["catch"](function (error) {
+    // clear cache on error
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+  return stripePromise$1;
+}; // Execute our own script injection after a tick to give users time to do their
 // own script injection.
 
-var stripePromise$1 = Promise.resolve().then(function () {
-  return loadScript(null);
-});
-var loadCalled = false;
-stripePromise$1["catch"](function (err) {
+
+Promise.resolve().then(function () {
+  return getStripePromise();
+})["catch"](function (error) {
   if (!loadCalled) {
-    console.warn(err);
+    console.warn(error);
   }
 });
 var loadStripe = function loadStripe() {
@@ -151,8 +165,9 @@ var loadStripe = function loadStripe() {
   }
 
   loadCalled = true;
-  var startTime = Date.now();
-  return stripePromise$1.then(function (maybeStripe) {
+  var startTime = Date.now(); // if previous attempts are unsuccessful, will re-load script
+
+  return getStripePromise().then(function (maybeStripe) {
     return initStripe(maybeStripe, args, startTime);
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/stripe-js",
-  "version": "2.2.2",
+  "version": "2.4.0",
   "description": "Stripe.js loading utility",
   "repository": "github:stripe/stripe-js",
   "main": "dist/stripe.js",

package/src/index.test.ts

@@ -150,6 +150,68 @@ describe('Stripe module loader', () => {
         new Error('Stripe.js not available')
       );
     });
+
+    it('rejects on first load, and succeeds on second load resolving with Stripe object', async () => {
+      const {loadStripe} = require(requirePath);
+
+      // start of first load, expect load failure
+      let stripePromise = loadStripe('pk_test_foo');
+
+      await Promise.resolve();
+      dispatchScriptEvent('error');
+
+      await expect(stripePromise).rejects.toEqual(
+        new Error('Failed to load Stripe.js')
+      );
+
+      expect(console.warn).not.toHaveBeenCalled();
+
+      // start of second load, expect successful load
+      stripePromise = loadStripe('pk_test_foo');
+
+      await new Promise((resolve) => setTimeout(resolve));
+      window.Stripe = jest.fn((key) => ({key})) as any;
+      dispatchScriptEvent('load');
+
+      return expect(stripePromise).resolves.toEqual({key: 'pk_test_foo'});
+    });
+
+    it('rejects on first load and second load but succeeds on third load resolving with Stripe object', async () => {
+      const {loadStripe} = require(requirePath);
+
+      // start of first load, expect load failure
+      let stripePromise = loadStripe('pk_test_foo');
+
+      await Promise.resolve();
+      dispatchScriptEvent('error');
+
+      await expect(stripePromise).rejects.toEqual(
+        new Error('Failed to load Stripe.js')
+      );
+
+      expect(console.warn).not.toHaveBeenCalled();
+
+      // start of second load, expect load failure
+      stripePromise = loadStripe('pk_test_foo');
+
+      await Promise.resolve();
+      dispatchScriptEvent('error');
+
+      await expect(stripePromise).rejects.toEqual(
+        new Error('Failed to load Stripe.js')
+      );
+
+      expect(console.warn).not.toHaveBeenCalled();
+
+      // start of third load, expect success
+      stripePromise = loadStripe('pk_test_foo');
+
+      await new Promise((resolve) => setTimeout(resolve));
+      window.Stripe = jest.fn((key) => ({key})) as any;
+      dispatchScriptEvent('load');
+
+      return expect(stripePromise).resolves.toEqual({key: 'pk_test_foo'});
+    });
   });
 
   describe('loadStripe (index.ts)', () => {

package/src/index.ts

@@ -1,22 +1,38 @@
+import {StripeConstructor} from '../types';
 import {loadScript, initStripe, LoadStripe} from './shared';
 
-// Execute our own script injection after a tick to give users time to do their
-// own script injection.
-const stripePromise = Promise.resolve().then(() => loadScript(null));
-
+let stripePromise: Promise<StripeConstructor | null> | null;
 let loadCalled = false;
 
-stripePromise.catch((err: Error) => {
-  if (!loadCalled) {
-    console.warn(err);
+const getStripePromise: () => Promise<StripeConstructor | null> = () => {
+  if (stripePromise) {
+    return stripePromise;
   }
-});
+
+  stripePromise = loadScript(null).catch((error) => {
+    // clear cache on error
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+  return stripePromise;
+};
+
+// Execute our own script injection after a tick to give users time to do their
+// own script injection.
+Promise.resolve()
+  .then(() => getStripePromise())
+  .catch((error) => {
+    if (!loadCalled) {
+      console.warn(error);
+    }
+  });
 
 export const loadStripe: LoadStripe = (...args) => {
   loadCalled = true;
   const startTime = Date.now();
 
-  return stripePromise.then((maybeStripe) =>
+  // if previous attempts are unsuccessful, will re-load script
+  return getStripePromise().then((maybeStripe) =>
     initStripe(maybeStripe, args, startTime)
   );
 };

package/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;
 

package/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;
 }

package/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?: {
@@ -796,6 +816,13 @@ export interface StripeElementsOptionsMode extends BaseStripeElementsOptions {
    * Either use mode or clientSecret when creating an Elements group
    */
   clientSecret?: never;
+
+  /**
+   * The external payment methods to be displayed in the Payment Element that you are already integrated with.
+   *
+   * @docs https://stripe.com/docs/js/elements_object/create#stripe_elements-options-externalPaymentMethodTypes
+   */
+  externalPaymentMethodTypes?: string[];
 }
 
 export type StripeElementsOptions =