From 5279882918587f1d6bb5affba8f8a18981b349d4 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Mon, 4 Nov 2024 17:17:07 +0600 Subject: [PATCH 1/6] create ece settings preview component --- .../express-checkout-button-preview.js | 117 ++++++++++++++++++ .../payment-request-settings-section.js | 8 ++ ...-wc-stripe-payment-requests-controller.php | 11 ++ 3 files changed, 136 insertions(+) create mode 100644 client/entrypoints/payment-request-settings/express-checkout-button-preview.js diff --git a/client/entrypoints/payment-request-settings/express-checkout-button-preview.js b/client/entrypoints/payment-request-settings/express-checkout-button-preview.js new file mode 100644 index 000000000..6eadd4948 --- /dev/null +++ b/client/entrypoints/payment-request-settings/express-checkout-button-preview.js @@ -0,0 +1,117 @@ +/* global wc_stripe_payment_request_settings_params */ + +import { __ } from '@wordpress/i18n'; +import { useState } from 'react'; +import { Elements, ExpressCheckoutElement } from '@stripe/react-stripe-js'; +import { loadStripe } from '@stripe/stripe-js'; +import { getDefaultBorderRadius } from 'wcstripe/express-checkout/utils'; +import InlineNotice from 'components/inline-notice'; + +const buttonSizeToPxMap = { + small: 40, + default: 48, + large: 56, +}; + +/* eslint-disable camelcase */ +const stripePromise = loadStripe( + wc_stripe_payment_request_settings_params.key, + { + locale: wc_stripe_payment_request_settings_params.stripe_locale, + } +); +/* eslint-enable camelcase */ + +const ExpressCheckoutPreviewComponent = ( { buttonType, theme, size } ) => { + const [ canRenderButtons, setCanRenderButtons ] = useState( true ); + + const options = { + mode: 'payment', + amount: 1000, + currency: 'usd', + appearance: { + variables: { + borderRadius: `${ getDefaultBorderRadius() }px`, + spacingUnit: '6px', + }, + }, + }; + + const height = buttonSizeToPxMap[ size ] || buttonSizeToPxMap.medium; + + const mapThemeConfigToButtonTheme = ( paymentMethod, buttonTheme ) => { + switch ( buttonTheme ) { + case 'dark': + return 'black'; + case 'light': + return 'white'; + case 'light-outline': + if ( paymentMethod === 'googlePay' ) { + return 'white'; + } + + return 'white-outline'; + default: + return 'black'; + } + }; + + const type = buttonType === 'default' ? 'plain' : buttonType; + + const buttonOptions = { + buttonHeight: Math.min( Math.max( height, 40 ), 55 ), + buttonTheme: { + googlePay: mapThemeConfigToButtonTheme( 'googlePay', theme ), + applePay: mapThemeConfigToButtonTheme( 'applePay', theme ), + }, + buttonType: { + googlePay: type, + applePay: type, + }, + paymentMethods: { + link: 'never', + googlePay: 'always', + applePay: 'always', + }, + layout: { overflow: 'never' }, + }; + + const onReady = ( { availablePaymentMethods } ) => { + if ( availablePaymentMethods ) { + setCanRenderButtons( true ); + } else { + setCanRenderButtons( false ); + } + }; + + if ( canRenderButtons ) { + return ( +
+ + {} } + onReady={ onReady } + /> + +
+ ); + } + + return ( + + { __( + 'Failed to preview the Apple Pay or Google Pay button. ' + + 'Ensure your store uses HTTPS on a publicly available domain ' + + "and you're viewing this page in a Safari or Chrome browser. " + + 'Your device must be configured to use Apple Pay or Google Pay.', + 'woocommerce-gateway-stripe' + ) } + + ); +}; + +export default ExpressCheckoutPreviewComponent; diff --git a/client/entrypoints/payment-request-settings/payment-request-settings-section.js b/client/entrypoints/payment-request-settings/payment-request-settings-section.js index 6a11100d9..91135ed69 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -11,6 +11,7 @@ import interpolateComponents from 'interpolate-components'; import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; import PaymentRequestButtonPreview from './payment-request-button-preview'; +import ExpressCheckoutPreviewComponent from './express-checkout-button-preview'; import { usePaymentRequestEnabledSettings, usePaymentRequestLocations, @@ -263,6 +264,13 @@ const PaymentRequestsSettingsSection = () => { + + diff --git a/includes/admin/class-wc-stripe-payment-requests-controller.php b/includes/admin/class-wc-stripe-payment-requests-controller.php index 83f0bba71..1db6d1772 100644 --- a/includes/admin/class-wc-stripe-payment-requests-controller.php +++ b/includes/admin/class-wc-stripe-payment-requests-controller.php @@ -39,6 +39,17 @@ public function admin_scripts() { ); wp_enqueue_script( 'wc-stripe-payment-request-settings' ); + $stripe_settings = WC_Stripe_Helper::get_stripe_settings(); + $params = [ + 'key' => 'yes' === $stripe_settings['testmode'] ? $stripe_settings['test_publishable_key'] : $stripe_settings['publishable_key'], + 'stripe_locale' => WC_Stripe_Helper::convert_wc_locale_to_stripe_locale( get_locale() ), + ]; + wp_localize_script( + 'wc-stripe-payment-request-settings', + 'wc_stripe_payment_request_settings_params', + $params + ); + wp_register_style( 'wc-stripe-payment-request-settings', plugins_url( 'build/payment_requests_settings.css', WC_STRIPE_MAIN_FILE ), From 702dea054804e06b4495d7ac897637c208c3cedc Mon Sep 17 00:00:00 2001 From: Mayisha Date: Mon, 4 Nov 2024 20:16:51 +0600 Subject: [PATCH 2/6] check feature flag --- .../express-checkout-button-preview.js | 2 +- .../payment-request-settings-section.js | 26 ++++++++++++------- ...-wc-stripe-payment-requests-controller.php | 5 ++-- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/client/entrypoints/payment-request-settings/express-checkout-button-preview.js b/client/entrypoints/payment-request-settings/express-checkout-button-preview.js index 6eadd4948..0147d5c06 100644 --- a/client/entrypoints/payment-request-settings/express-checkout-button-preview.js +++ b/client/entrypoints/payment-request-settings/express-checkout-button-preview.js @@ -17,7 +17,7 @@ const buttonSizeToPxMap = { const stripePromise = loadStripe( wc_stripe_payment_request_settings_params.key, { - locale: wc_stripe_payment_request_settings_params.stripe_locale, + locale: wc_stripe_payment_request_settings_params.locale, } ); /* eslint-enable camelcase */ diff --git a/client/entrypoints/payment-request-settings/payment-request-settings-section.js b/client/entrypoints/payment-request-settings/payment-request-settings-section.js index 91135ed69..dec5b7377 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -1,3 +1,5 @@ +/* global wc_stripe_payment_request_settings_params */ + import { ADMIN_URL, getSetting } from '@woocommerce/settings'; import { __ } from '@wordpress/i18n'; import React, { useMemo } from 'react'; @@ -131,6 +133,8 @@ const PaymentRequestsSettingsSection = () => { const accountId = useAccount().data?.account?.id; const [ publishableKey ] = useAccountKeysPublishableKey(); const [ testPublishableKey ] = useAccountKeysTestPublishableKey(); + const isECEEnabled = + wc_stripe_payment_request_settings_params.is_ece_enabled; // eslint-disable-line camelcase const stripePromise = useMemo( () => { return loadStripe( @@ -261,16 +265,18 @@ const PaymentRequestsSettingsSection = () => { />

{ __( 'Preview', 'woocommerce-gateway-stripe' ) }

- - - - - + { isECEEnabled ? ( + + ) : ( + + + + ) } diff --git a/includes/admin/class-wc-stripe-payment-requests-controller.php b/includes/admin/class-wc-stripe-payment-requests-controller.php index 1db6d1772..5797cf2bd 100644 --- a/includes/admin/class-wc-stripe-payment-requests-controller.php +++ b/includes/admin/class-wc-stripe-payment-requests-controller.php @@ -41,8 +41,9 @@ public function admin_scripts() { $stripe_settings = WC_Stripe_Helper::get_stripe_settings(); $params = [ - 'key' => 'yes' === $stripe_settings['testmode'] ? $stripe_settings['test_publishable_key'] : $stripe_settings['publishable_key'], - 'stripe_locale' => WC_Stripe_Helper::convert_wc_locale_to_stripe_locale( get_locale() ), + 'key' => 'yes' === $stripe_settings['testmode'] ? $stripe_settings['test_publishable_key'] : $stripe_settings['publishable_key'], + 'locale' => WC_Stripe_Helper::convert_wc_locale_to_stripe_locale( get_locale() ), + 'is_ece_enabled' => WC_Stripe_Feature_Flags::is_stripe_ece_enabled(), ]; wp_localize_script( 'wc-stripe-payment-request-settings', From c3bff7b62376cad5e1020a0f9478d478c341d274 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Mon, 4 Nov 2024 20:17:56 +0600 Subject: [PATCH 3/6] add changelog --- changelog.txt | 1 + readme.txt | 1 + 2 files changed, 2 insertions(+) diff --git a/changelog.txt b/changelog.txt index f34a11a2b..b5c446110 100644 --- a/changelog.txt +++ b/changelog.txt @@ -14,6 +14,7 @@ * Tweak - Add error logging in ECE critical Ajax requests. * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages. * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages. +* Add - Show ECE button preview on settings page. = 8.8.1 - 2024-10-28 = * Tweak - Disables APMs when using the legacy checkout experience due Stripe deprecation by October 29, 2024. diff --git a/readme.txt b/readme.txt index 45a5595e2..9ca2b72e3 100644 --- a/readme.txt +++ b/readme.txt @@ -124,5 +124,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o * Tweak - Add error logging in ECE critical Ajax requests. * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages. * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages. +* Add - Show ECE button preview on settings page. [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt). From 32a208b88fe268464e4e7db6bf8409bb4fb75037 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Mon, 4 Nov 2024 20:38:07 +0600 Subject: [PATCH 4/6] use useMemo --- .../express-checkout-button-preview.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/client/entrypoints/payment-request-settings/express-checkout-button-preview.js b/client/entrypoints/payment-request-settings/express-checkout-button-preview.js index 0147d5c06..9bbdbf32f 100644 --- a/client/entrypoints/payment-request-settings/express-checkout-button-preview.js +++ b/client/entrypoints/payment-request-settings/express-checkout-button-preview.js @@ -1,7 +1,7 @@ /* global wc_stripe_payment_request_settings_params */ import { __ } from '@wordpress/i18n'; -import { useState } from 'react'; +import { useState, useMemo } from 'react'; import { Elements, ExpressCheckoutElement } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; import { getDefaultBorderRadius } from 'wcstripe/express-checkout/utils'; @@ -13,18 +13,17 @@ const buttonSizeToPxMap = { large: 56, }; -/* eslint-disable camelcase */ -const stripePromise = loadStripe( - wc_stripe_payment_request_settings_params.key, - { - locale: wc_stripe_payment_request_settings_params.locale, - } -); -/* eslint-enable camelcase */ - const ExpressCheckoutPreviewComponent = ( { buttonType, theme, size } ) => { const [ canRenderButtons, setCanRenderButtons ] = useState( true ); + /* eslint-disable camelcase */ + const stripePromise = useMemo( () => { + return loadStripe( wc_stripe_payment_request_settings_params.key, { + locale: wc_stripe_payment_request_settings_params.locale, + } ); + }, [] ); + /* eslint-enable camelcase */ + const options = { mode: 'payment', amount: 1000, From bc8c787d3ac83409397020533b897f2ee1f5f7f2 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Mon, 4 Nov 2024 20:46:03 +0600 Subject: [PATCH 5/6] fix tests --- .../payment-request-settings-locations.test.js | 14 ++++++++++++++ .../__tests__/payment-request-settings.test.js | 13 +++++++++++++ 2 files changed, 27 insertions(+) diff --git a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js b/client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js index abea9194a..b79d16dd1 100644 --- a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js +++ b/client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js @@ -55,6 +55,8 @@ const getMockPaymentRequestLocations = ( ]; describe( 'PaymentRequestsSettingsSection', () => { + const globalValues = global.wc_stripe_payment_request_settings_params; + beforeEach( () => { usePaymentRequestEnabledSettings.mockReturnValue( getMockPaymentRequestEnabledSettings( true, jest.fn() ) @@ -63,6 +65,18 @@ describe( 'PaymentRequestsSettingsSection', () => { usePaymentRequestLocations.mockReturnValue( getMockPaymentRequestLocations( true, true, true, jest.fn() ) ); + + global.wc_stripe_payment_request_settings_params = { + ...globalValues, + key: 'pk_test_123', + locale: 'en', + is_ece_enabled: true, + }; + } ); + + afterEach( () => { + jest.clearAllMocks(); + global.wc_stripe_payment_request_settings_params = globalValues; } ); it( 'should enable express checkout locations when express checkout is enabled', () => { diff --git a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js b/client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js index 17f68b027..fb15c1e00 100644 --- a/client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js +++ b/client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js @@ -57,6 +57,7 @@ const getMockPaymentRequestLocations = ( ]; describe( 'PaymentRequestsSettingsSection', () => { + const globalValues = global.wc_stripe_payment_request_settings_params; beforeEach( () => { usePaymentRequestEnabledSettings.mockReturnValue( getMockPaymentRequestEnabledSettings( true, jest.fn() ) @@ -65,6 +66,18 @@ describe( 'PaymentRequestsSettingsSection', () => { usePaymentRequestLocations.mockReturnValue( getMockPaymentRequestLocations( true, true, true, jest.fn() ) ); + + global.wc_stripe_payment_request_settings_params = { + ...globalValues, + key: 'pk_test_123', + locale: 'en', + is_ece_enabled: true, + }; + } ); + + afterEach( () => { + jest.clearAllMocks(); + global.wc_stripe_payment_request_settings_params = globalValues; } ); it( 'renders settings with defaults', () => { From 9f77234fa1dff42650f7835fe4928ad09410a09c Mon Sep 17 00:00:00 2001 From: Mayisha Date: Tue, 5 Nov 2024 11:25:53 +0600 Subject: [PATCH 6/6] fix spacing --- includes/admin/class-wc-stripe-payment-requests-controller.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/admin/class-wc-stripe-payment-requests-controller.php b/includes/admin/class-wc-stripe-payment-requests-controller.php index 5797cf2bd..beb2da974 100644 --- a/includes/admin/class-wc-stripe-payment-requests-controller.php +++ b/includes/admin/class-wc-stripe-payment-requests-controller.php @@ -40,7 +40,7 @@ public function admin_scripts() { wp_enqueue_script( 'wc-stripe-payment-request-settings' ); $stripe_settings = WC_Stripe_Helper::get_stripe_settings(); - $params = [ + $params = [ 'key' => 'yes' === $stripe_settings['testmode'] ? $stripe_settings['test_publishable_key'] : $stripe_settings['publishable_key'], 'locale' => WC_Stripe_Helper::convert_wc_locale_to_stripe_locale( get_locale() ), 'is_ece_enabled' => WC_Stripe_Feature_Flags::is_stripe_ece_enabled(),