Skip to content

Commit 5c19485

Browse files
MayishaMayisha
authored
Show ECE button in settings preview (#3579)
* create ece settings preview component * check feature flag * add changelog * use useMemo * fix tests * fix spacing
1 parent b3731e2 commit 5c19485

File tree

7 files changed

+174
-3
lines changed

7 files changed

+174
-3
lines changed

‎changelog.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* Tweak - Add error logging in ECE critical Ajax requests.
1616
* Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages.
1717
* Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages.
18+
* Add - Show ECE button preview on settings page.
1819
* Tweak - Remove the subscription order notes added each time a source wasn't migrated.
1920

2021
= 8.8.1 - 2024-10-28 =

‎client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ const getMockPaymentRequestLocations = (
5555
];
5656

5757
describe( 'PaymentRequestsSettingsSection', () => {
58+
const globalValues = global.wc_stripe_payment_request_settings_params;
59+
5860
beforeEach( () => {
5961
usePaymentRequestEnabledSettings.mockReturnValue(
6062
getMockPaymentRequestEnabledSettings( true, jest.fn() )
@@ -63,6 +65,18 @@ describe( 'PaymentRequestsSettingsSection', () => {
6365
usePaymentRequestLocations.mockReturnValue(
6466
getMockPaymentRequestLocations( true, true, true, jest.fn() )
6567
);
68+
69+
global.wc_stripe_payment_request_settings_params = {
70+
...globalValues,
71+
key: 'pk_test_123',
72+
locale: 'en',
73+
is_ece_enabled: true,
74+
};
75+
} );
76+
77+
afterEach( () => {
78+
jest.clearAllMocks();
79+
global.wc_stripe_payment_request_settings_params = globalValues;
6680
} );
6781

6882
it( 'should enable express checkout locations when express checkout is enabled', () => {

‎client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const getMockPaymentRequestLocations = (
5757
];
5858

5959
describe( 'PaymentRequestsSettingsSection', () => {
60+
const globalValues = global.wc_stripe_payment_request_settings_params;
6061
beforeEach( () => {
6162
usePaymentRequestEnabledSettings.mockReturnValue(
6263
getMockPaymentRequestEnabledSettings( true, jest.fn() )
@@ -65,6 +66,18 @@ describe( 'PaymentRequestsSettingsSection', () => {
6566
usePaymentRequestLocations.mockReturnValue(
6667
getMockPaymentRequestLocations( true, true, true, jest.fn() )
6768
);
69+
70+
global.wc_stripe_payment_request_settings_params = {
71+
...globalValues,
72+
key: 'pk_test_123',
73+
locale: 'en',
74+
is_ece_enabled: true,
75+
};
76+
} );
77+
78+
afterEach( () => {
79+
jest.clearAllMocks();
80+
global.wc_stripe_payment_request_settings_params = globalValues;
6881
} );
6982

7083
it( 'renders settings with defaults', () => {

‎client/entrypoints/payment-request-settings/express-checkout-button-preview.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/* global wc_stripe_payment_request_settings_params */
2+
3+
import { __ } from '@wordpress/i18n';
4+
import { useState, useMemo } from 'react';
5+
import { Elements, ExpressCheckoutElement } from '@stripe/react-stripe-js';
6+
import { loadStripe } from '@stripe/stripe-js';
7+
import { getDefaultBorderRadius } from 'wcstripe/express-checkout/utils';
8+
import InlineNotice from 'components/inline-notice';
9+
10+
const buttonSizeToPxMap = {
11+
small: 40,
12+
default: 48,
13+
large: 56,
14+
};
15+
16+
const ExpressCheckoutPreviewComponent = ( { buttonType, theme, size } ) => {
17+
const [ canRenderButtons, setCanRenderButtons ] = useState( true );
18+
19+
/* eslint-disable camelcase */
20+
const stripePromise = useMemo( () => {
21+
return loadStripe( wc_stripe_payment_request_settings_params.key, {
22+
locale: wc_stripe_payment_request_settings_params.locale,
23+
} );
24+
}, [] );
25+
/* eslint-enable camelcase */
26+
27+
const options = {
28+
mode: 'payment',
29+
amount: 1000,
30+
currency: 'usd',
31+
appearance: {
32+
variables: {
33+
borderRadius: `${ getDefaultBorderRadius() }px`,
34+
spacingUnit: '6px',
35+
},
36+
},
37+
};
38+
39+
const height = buttonSizeToPxMap[ size ] || buttonSizeToPxMap.medium;
40+
41+
const mapThemeConfigToButtonTheme = ( paymentMethod, buttonTheme ) => {
42+
switch ( buttonTheme ) {
43+
case 'dark':
44+
return 'black';
45+
case 'light':
46+
return 'white';
47+
case 'light-outline':
48+
if ( paymentMethod === 'googlePay' ) {
49+
return 'white';
50+
}
51+
52+
return 'white-outline';
53+
default:
54+
return 'black';
55+
}
56+
};
57+
58+
const type = buttonType === 'default' ? 'plain' : buttonType;
59+
60+
const buttonOptions = {
61+
buttonHeight: Math.min( Math.max( height, 40 ), 55 ),
62+
buttonTheme: {
63+
googlePay: mapThemeConfigToButtonTheme( 'googlePay', theme ),
64+
applePay: mapThemeConfigToButtonTheme( 'applePay', theme ),
65+
},
66+
buttonType: {
67+
googlePay: type,
68+
applePay: type,
69+
},
70+
paymentMethods: {
71+
link: 'never',
72+
googlePay: 'always',
73+
applePay: 'always',
74+
},
75+
layout: { overflow: 'never' },
76+
};
77+
78+
const onReady = ( { availablePaymentMethods } ) => {
79+
if ( availablePaymentMethods ) {
80+
setCanRenderButtons( true );
81+
} else {
82+
setCanRenderButtons( false );
83+
}
84+
};
85+
86+
if ( canRenderButtons ) {
87+
return (
88+
<div
89+
key={ `${ buttonType }-${ theme }` }
90+
style={ { minHeight: `${ height }px`, width: '100%' } }
91+
>
92+
<Elements stripe={ stripePromise } options={ options }>
93+
<ExpressCheckoutElement
94+
options={ buttonOptions }
95+
onClick={ () => {} }
96+
onReady={ onReady }
97+
/>
98+
</Elements>
99+
</div>
100+
);
101+
}
102+
103+
return (
104+
<InlineNotice icon status="error" isDismissible={ false }>
105+
{ __(
106+
'Failed to preview the Apple Pay or Google Pay button. ' +
107+
'Ensure your store uses HTTPS on a publicly available domain ' +
108+
"and you're viewing this page in a Safari or Chrome browser. " +
109+
'Your device must be configured to use Apple Pay or Google Pay.',
110+
'woocommerce-gateway-stripe'
111+
) }
112+
</InlineNotice>
113+
);
114+
};
115+
116+
export default ExpressCheckoutPreviewComponent;

‎client/entrypoints/payment-request-settings/payment-request-settings-section.js

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* global wc_stripe_payment_request_settings_params */
2+
13
import { ADMIN_URL, getSetting } from '@woocommerce/settings';
24
import { __ } from '@wordpress/i18n';
35
import React, { useMemo } from 'react';
@@ -11,6 +13,7 @@ import interpolateComponents from 'interpolate-components';
1113
import { Elements } from '@stripe/react-stripe-js';
1214
import { loadStripe } from '@stripe/stripe-js';
1315
import PaymentRequestButtonPreview from './payment-request-button-preview';
16+
import ExpressCheckoutPreviewComponent from './express-checkout-button-preview';
1417
import {
1518
usePaymentRequestEnabledSettings,
1619
usePaymentRequestLocations,
@@ -130,6 +133,8 @@ const PaymentRequestsSettingsSection = () => {
130133
const accountId = useAccount().data?.account?.id;
131134
const [ publishableKey ] = useAccountKeysPublishableKey();
132135
const [ testPublishableKey ] = useAccountKeysTestPublishableKey();
136+
const isECEEnabled =
137+
wc_stripe_payment_request_settings_params.is_ece_enabled; // eslint-disable-line camelcase
133138

134139
const stripePromise = useMemo( () => {
135140
return loadStripe(
@@ -260,9 +265,18 @@ const PaymentRequestsSettingsSection = () => {
260265
/>
261266
<p>{ __( 'Preview', 'woocommerce-gateway-stripe' ) }</p>
262267
<LoadableAccountSection numLines={ 7 }>
263-
<Elements stripe={ stripePromise }>
264-
<PaymentRequestButtonPreview />
265-
</Elements>
268+
{ isECEEnabled ? (
269+
<ExpressCheckoutPreviewComponent
270+
stripe={ stripePromise }
271+
buttonType={ buttonType }
272+
theme={ theme }
273+
size={ size }
274+
/>
275+
) : (
276+
<Elements stripe={ stripePromise }>
277+
<PaymentRequestButtonPreview />
278+
</Elements>
279+
) }
266280
</LoadableAccountSection>
267281
</CardBody>
268282
</Card>

‎includes/admin/class-wc-stripe-payment-requests-controller.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,18 @@ public function admin_scripts() {
3939
);
4040
wp_enqueue_script( 'wc-stripe-payment-request-settings' );
4141

42+
$stripe_settings = WC_Stripe_Helper::get_stripe_settings();
43+
$params = [
44+
'key' => 'yes' === $stripe_settings['testmode'] ? $stripe_settings['test_publishable_key'] : $stripe_settings['publishable_key'],
45+
'locale' => WC_Stripe_Helper::convert_wc_locale_to_stripe_locale( get_locale() ),
46+
'is_ece_enabled' => WC_Stripe_Feature_Flags::is_stripe_ece_enabled(),
47+
];
48+
wp_localize_script(
49+
'wc-stripe-payment-request-settings',
50+
'wc_stripe_payment_request_settings_params',
51+
$params
52+
);
53+
4254
wp_register_style(
4355
'wc-stripe-payment-request-settings',
4456
plugins_url( 'build/payment_requests_settings.css', WC_STRIPE_MAIN_FILE ),

‎readme.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
125125
* Tweak - Add error logging in ECE critical Ajax requests.
126126
* Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages.
127127
* Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages.
128+
* Add - Show ECE button preview on settings page.
128129
* Tweak - Remove the subscription order notes added each time a source wasn't migrated.
129130

130131
[See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).

0 commit comments

Comments
 (0)