Refactor loadStripe for Express Checkouts

changelog/as-improve-stripe-for-ece

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Refactor loadStripe for Express Checkouts.

client/checkout/api/index.js

@@ -103,15 +103,15 @@ export default class WCPayAPI {
 	}
 
 	/**
-	 * Load Stripe for payment request button.
+	 * Load Stripe for Express Checkout with the merchant’s connected account.
 	 *
-	 * @param {boolean}  forceAccountRequest True to instantiate the Stripe object with the merchant's account key.
 	 * @return {Promise} Promise with the Stripe object or an error.
 	 */
-	loadStripe( forceAccountRequest = false ) {
+	loadStripeForExpressCheckout() {
 		return new Promise( ( resolve ) => {
 			try {
-				resolve( this.getStripe( forceAccountRequest ) );
+				// Force Stripe to be loadded with the connected account.
+				resolve( this.getStripe( true ) );
 			} catch ( error ) {
 				// In order to avoid showing console error publicly to users,
 				// we resolve instead of rejecting when there is an error.

client/express-checkout/blocks/components/express-checkout-container.js

@@ -18,7 +18,7 @@ const ExpressCheckoutContainer = ( props ) => {
 	const { api, billing, buttonAttributes } = props;
 
 	const stripePromise = useMemo( () => {
-		return api.loadStripe( true );
+		return api.loadStripeForExpressCheckout();
 	}, [ api ] );
 
 	const options = {

client/express-checkout/utils/checkPaymentMethodIsAvailable.js

@@ -42,7 +42,7 @@ export const checkPaymentMethodIsAvailable = memoize(
 
 		root.render(
 			<Elements
-				stripe={ api.loadStripe( true ) }
+				stripe={ api.loadStripeForExpressCheckout() }
 				options={ {
 					mode: 'payment',
 					paymentMethodCreation: 'manual',

client/payment-request/blocks/index.js

@@ -25,7 +25,10 @@ const paymentRequestPaymentMethod = ( api ) => ( {
 	),
 	gatewayId: 'woocommerce_payments',
 	content: (
-		<PaymentRequestExpress api={ api } stripe={ api.loadStripe( true ) } />
+		<PaymentRequestExpress
+			api={ api }
+			stripe={ api.loadStripeForExpressCheckout() }
+		/>
 	),
 	edit: <ApplePayPreview />,
 	canMakePayment: ( cartData ) => {
@@ -46,7 +49,7 @@ const paymentRequestPaymentMethod = ( api ) => ( {
 			return false;
 		}
 
-		return api.loadStripe( true ).then( ( stripe ) => {
+		return api.loadStripeForExpressCheckout().then( ( stripe ) => {
 			// Create a payment request and check if we can make a payment to determine whether to
 			// show the Payment Request Button or not. This is necessary because a browser might be
 			// able to load the Stripe JS object, but not support Payment Requests.

client/tokenized-payment-request/blocks/index.js

@@ -19,7 +19,10 @@ const ApplePayPreview = () => <img src={ applePayImage } alt="" />;
 const tokenizedCartPaymentRequestPaymentMethod = ( api ) => ( {
 	name: PAYMENT_METHOD_NAME_PAYMENT_REQUEST,
 	content: (
-		<PaymentRequestExpress api={ api } stripe={ api.loadStripe( true ) } />
+		<PaymentRequestExpress
+			api={ api }
+			stripe={ api.loadStripeForExpressCheckout() }
+		/>
 	),
 	edit: <ApplePayPreview />,
 	canMakePayment: ( cartData ) => {
@@ -40,7 +43,7 @@ const tokenizedCartPaymentRequestPaymentMethod = ( api ) => ( {
 			return false;
 		}
 
-		return api.loadStripe( true ).then( ( stripe ) => {
+		return api.loadStripeForExpressCheckout().then( ( stripe ) => {
 			// Create a payment request and check if we can make a payment to determine whether to
 			// show the Payment Request Button or not. This is necessary because a browser might be
 			// able to load the Stripe JS object, but not support Payment Requests.