diff --git a/changelog/refactor-stripe-ece-deprecated-options b/changelog/refactor-stripe-ece-deprecated-options new file mode 100644 index 00000000000..46b4ee1b535 --- /dev/null +++ b/changelog/refactor-stripe-ece-deprecated-options @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +refactor: moved deprecated `click` options on Stripe ECE to `create`, instead diff --git a/client/express-checkout/blocks/hooks/use-express-checkout.js b/client/express-checkout/blocks/hooks/use-express-checkout.js index a3f28340342..aba43c331c0 100644 --- a/client/express-checkout/blocks/hooks/use-express-checkout.js +++ b/client/express-checkout/blocks/hooks/use-express-checkout.js @@ -35,7 +35,18 @@ export const useExpressCheckout = ( { const stripe = useStripe(); const elements = useElements(); - const buttonOptions = getExpressCheckoutButtonStyleSettings(); + const buttonOptions = { + ...getExpressCheckoutButtonStyleSettings(), + allowedShippingCountries: getExpressCheckoutData( 'checkout' ) + .allowed_shipping_countries, + business: { + name: getExpressCheckoutData( 'store_name' ), + }, + emailRequired: true, + phoneNumberRequired: + getExpressCheckoutData( 'checkout' )?.needs_payer_phone ?? false, + shippingAddressRequired: shippingData?.needsShipping, + }; const onCancel = () => { onCancelHandler(); @@ -99,9 +110,6 @@ export const useExpressCheckout = ( { ); const options = { - business: { - name: getExpressCheckoutData( 'store_name' ), - }, // if the `billing.cartTotal.value` is less than the total of `lineItems`, Stripe throws an error // it can sometimes happen that the total is _slightly_ less, due to rounding errors on individual items/taxes/shipping // (or with the `woocommerce_tax_round_at_subtotal` setting). @@ -111,14 +119,7 @@ export const useExpressCheckout = ( { billing.cartTotal.value < totalAmountOfLineItems ? [] : lineItems, - emailRequired: true, - shippingAddressRequired, - phoneNumberRequired: - getExpressCheckoutData( 'checkout' )?.needs_payer_phone ?? - false, shippingRates, - allowedShippingCountries: getExpressCheckoutData( 'checkout' ) - .allowed_shipping_countries, }; // Click event from WC Blocks. diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js index 7af4a394d72..cfa824c480e 100644 --- a/client/express-checkout/index.js +++ b/client/express-checkout/index.js @@ -78,14 +78,7 @@ const getTotalAmount = () => { const getOnClickOptions = () => { if ( cachedCartData ) { return { - // pay-for-order should never display the shipping selection. - shippingAddressRequired: - getExpressCheckoutData( 'button_context' ) !== - 'pay_for_order' && cachedCartData.needs_shipping, shippingRates: transformCartDataForShippingRates( cachedCartData ), - phoneNumberRequired: - getExpressCheckoutData( 'checkout' )?.needs_payer_phone ?? - false, lineItems: transformCartDataForDisplayItems( cachedCartData ), }; } @@ -95,11 +88,6 @@ const getOnClickOptions = () => { getExpressCheckoutData( 'product' ) ) { return { - shippingAddressRequired: - getExpressCheckoutData( 'product' )?.needs_shipping ?? false, - phoneNumberRequired: - getExpressCheckoutData( 'checkout' )?.needs_payer_phone ?? - false, lineItems: ( getExpressCheckoutData( 'product' )?.displayItems ?? [] ).map( ( { label, amount } ) => ( { @@ -110,6 +98,28 @@ const getOnClickOptions = () => { } }; +const getShippingAddressRequired = () => { + return getExpressCheckoutData( 'button_context' ) === 'product' + ? getExpressCheckoutData( 'product' )?.needs_shipping ?? false + : getExpressCheckoutData( 'button_context' ) !== 'pay_for_order' && + ( cachedCartData?.needs_shipping ?? false ); +}; + +const getCreateOptions = () => { + return { + ...getExpressCheckoutButtonStyleSettings(), + allowedShippingCountries: getExpressCheckoutData( 'checkout' ) + .allowed_shipping_countries, + business: { + name: getExpressCheckoutData( 'store_name' ), + }, + emailRequired: true, + phoneNumberRequired: + getExpressCheckoutData( 'checkout' )?.needs_payer_phone ?? false, + shippingAddressRequired: getShippingAddressRequired(), + }; +}; + let elements; jQuery( ( $ ) => { @@ -220,7 +230,7 @@ jQuery( ( $ ) => { const eceButton = elements.create( 'expressCheckout', - getExpressCheckoutButtonStyleSettings() + getCreateOptions() ); expressCheckoutButtonUi.renderButton( eceButton ); @@ -326,22 +336,15 @@ jQuery( ( $ ) => { onClickHandler( event ); event.resolve( { - // `options.displayItems`, `options.shippingAddressRequired`, `options.requestPhone`, `options.shippingRates`, + // `options.displayItems`, `options.shippingRates`, // are all coming from prior of the initialization. // The "real" values will be updated once the button loads. // They are preemptively initialized because the `event.resolve({})` // needs to be called within 1 second of the `click` event. - business: { - name: getExpressCheckoutData( 'store_name' ), - }, - emailRequired: true, ...options, - shippingRates: options.shippingAddressRequired + shippingRates: getShippingAddressRequired() ? shippingOptionsWithFallback : undefined, - allowedShippingCountries: getExpressCheckoutData( - 'checkout' - ).allowed_shipping_countries, } ); } ); diff --git a/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php b/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php index 247c31b6005..ddf948a0af4 100644 --- a/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php +++ b/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php @@ -243,7 +243,251 @@ public function get_express_checkout_params() { 'needs_shipping' => WC()->cart->needs_shipping(), // Defaults to 'required' to match how core initializes this option. 'needs_payer_phone' => 'required' === get_option( 'woocommerce_checkout_phone_field', 'required' ), - 'allowed_shipping_countries' => array_keys( WC()->countries->get_shipping_countries() ?? [] ), + 'allowed_shipping_countries' => array_values( + array_intersect( + array_keys( WC()->countries->get_shipping_countries() ?? [] ), + [ + 'AC', + 'AD', + 'AE', + 'AF', + 'AG', + 'AI', + 'AL', + 'AM', + 'AO', + 'AQ', + 'AR', + 'AT', + 'AU', + 'AW', + 'AX', + 'AZ', + 'BA', + 'BB', + 'BD', + 'BE', + 'BF', + 'BG', + 'BH', + 'BI', + 'BJ', + 'BL', + 'BM', + 'BN', + 'BO', + 'BQ', + 'BR', + 'BS', + 'BT', + 'BV', + 'BW', + 'BY', + 'BZ', + 'CA', + 'CD', + 'CF', + 'CG', + 'CH', + 'CI', + 'CK', + 'CL', + 'CM', + 'CN', + 'CO', + 'CR', + 'CV', + 'CW', + 'CY', + 'CZ', + 'DE', + 'DJ', + 'DK', + 'DM', + 'DO', + 'DZ', + 'EC', + 'EE', + 'EG', + 'EH', + 'ER', + 'ES', + 'ET', + 'FI', + 'FJ', + 'FK', + 'FO', + 'FR', + 'GA', + 'GB', + 'GD', + 'GE', + 'GF', + 'GG', + 'GH', + 'GI', + 'GL', + 'GM', + 'GN', + 'GP', + 'GQ', + 'GR', + 'GS', + 'GT', + 'GU', + 'GW', + 'GY', + 'HK', + 'HN', + 'HR', + 'HT', + 'HU', + 'ID', + 'IE', + 'IL', + 'IM', + 'IN', + 'IO', + 'IQ', + 'IS', + 'IT', + 'JE', + 'JM', + 'JO', + 'JP', + 'KE', + 'KG', + 'KH', + 'KI', + 'KM', + 'KN', + 'KR', + 'KW', + 'KY', + 'KZ', + 'LA', + 'LB', + 'LC', + 'LI', + 'LK', + 'LR', + 'LS', + 'LT', + 'LU', + 'LV', + 'LY', + 'MA', + 'MC', + 'MD', + 'ME', + 'MF', + 'MG', + 'MK', + 'ML', + 'MM', + 'MN', + 'MO', + 'MQ', + 'MR', + 'MS', + 'MT', + 'MU', + 'MV', + 'MW', + 'MX', + 'MY', + 'MZ', + 'NA', + 'NC', + 'NE', + 'NG', + 'NI', + 'NL', + 'NO', + 'NP', + 'NR', + 'NU', + 'NZ', + 'OM', + 'PA', + 'PE', + 'PF', + 'PG', + 'PH', + 'PK', + 'PL', + 'PM', + 'PN', + 'PR', + 'PS', + 'PT', + 'PY', + 'QA', + 'RE', + 'RO', + 'RS', + 'RU', + 'RW', + 'SA', + 'SB', + 'SC', + 'SD', + 'SE', + 'SG', + 'SH', + 'SI', + 'SJ', + 'SK', + 'SL', + 'SM', + 'SN', + 'SO', + 'SR', + 'SS', + 'ST', + 'SV', + 'SX', + 'SZ', + 'TA', + 'TC', + 'TD', + 'TF', + 'TG', + 'TH', + 'TJ', + 'TK', + 'TL', + 'TM', + 'TN', + 'TO', + 'TR', + 'TT', + 'TV', + 'TW', + 'TZ', + 'UA', + 'UG', + 'US', + 'UY', + 'UZ', + 'VA', + 'VC', + 'VE', + 'VG', + 'VN', + 'VU', + 'WF', + 'WS', + 'XK', + 'YE', + 'YT', + 'ZA', + 'ZM', + 'ZW', + 'ZZ', + ] + ) + ), 'display_prices_with_tax' => 'incl' === get_option( 'woocommerce_tax_display_cart' ), ], 'button' => $this->get_button_settings(),