Skip to content

Commit 924c2d8

Browse files
malithsenhsingyuc
malithsen
authored and
hsingyuc
committed
Settings page payment method UI updates (#5563)
1 parent 26146b7 commit 924c2d8

File tree

4 files changed

+197
-119
lines changed

4 files changed

+197
-119
lines changed

‎changelog/update-settings-page-apple-google-pay

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: update
3+
4+
Updated express payment method UI in settings page

‎client/settings/express-checkout-settings/platform-checkout-settings.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const PlatformCheckoutSettings = ( { section } ) => {
7373
/>
7474
<h4>
7575
{ __(
76-
'Enable WooPay on selected pages',
76+
'Enable WooPay button on selected pages',
7777
'woocommerce-payments'
7878
) }
7979
</h4>

‎client/settings/express-checkout/index.js

Lines changed: 183 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -127,48 +127,54 @@ const ExpressCheckout = () => {
127127
<div className="express-checkout__description">
128128
{
129129
/* eslint-disable jsx-a11y/anchor-has-content */
130-
interpolateComponents( {
131-
mixedString: __(
132-
'Boost conversion and customer loyalty by offering a single click, secure way to pay. ' +
133-
'By using {{wooPayLink}}WooPay{{/wooPayLink}}, you agree to our ' +
134-
'{{tosLink}}WooCommerce Terms of Service{{/tosLink}} ' +
135-
'and and {{privacyLink}}Privacy Policy{{/privacyLink}}. ' +
136-
'You understand you will be sharing data with us. ' +
137-
'{{trackingLink}}Click here{{/trackingLink}} to learn more about the ' +
138-
'data you will be sharing and opt-out options.',
139-
'woocommerce-payments'
140-
),
141-
components: {
142-
wooPayLink: (
143-
<a
144-
target="_blank"
145-
rel="noreferrer"
146-
href="https://woocommerce.com/document/woopay-merchant-documentation/"
147-
/>
148-
),
149-
tosLink: (
150-
<a
151-
target="_blank"
152-
rel="noreferrer"
153-
href="https://wordpress.com/tos/"
154-
/>
155-
),
156-
privacyLink: (
157-
<a
158-
target="_blank"
159-
rel="noreferrer"
160-
href="https://automattic.com/privacy/"
161-
/>
162-
),
163-
trackingLink: (
164-
<a
165-
target="_blank"
166-
rel="noreferrer"
167-
href="https://woocommerce.com/usage-tracking/"
168-
/>
169-
),
170-
},
171-
} )
130+
isPlatformCheckoutEnabled
131+
? __(
132+
'Boost conversion and customer loyalty by offering a single click, secure way to pay.',
133+
'woocommerce-payments'
134+
)
135+
: interpolateComponents( {
136+
mixedString: __(
137+
/* eslint-disable-next-line max-len */
138+
'Boost conversion and customer loyalty by offering a single click, secure way to pay. ' +
139+
'By using {{wooPayLink}}WooPay{{/wooPayLink}}, you agree to our ' +
140+
'{{tosLink}}WooCommerce Terms of Service{{/tosLink}} ' +
141+
'and and {{privacyLink}}Privacy Policy{{/privacyLink}}. ' +
142+
'You understand you will be sharing data with us. ' +
143+
'{{trackingLink}}Click here{{/trackingLink}} to learn more about the ' +
144+
'data you will be sharing and opt-out options.',
145+
'woocommerce-payments'
146+
),
147+
components: {
148+
wooPayLink: (
149+
<a
150+
target="_blank"
151+
rel="noreferrer"
152+
href="https://woocommerce.com/document/woopay-merchant-documentation/"
153+
/>
154+
),
155+
tosLink: (
156+
<a
157+
target="_blank"
158+
rel="noreferrer"
159+
href="https://wordpress.com/tos/"
160+
/>
161+
),
162+
privacyLink: (
163+
<a
164+
target="_blank"
165+
rel="noreferrer"
166+
href="https://automattic.com/privacy/"
167+
/>
168+
),
169+
trackingLink: (
170+
<a
171+
target="_blank"
172+
rel="noreferrer"
173+
href="https://woocommerce.com/usage-tracking/"
174+
/>
175+
),
176+
},
177+
} )
172178
/* eslint-enable jsx-a11y/anchor-has-content */
173179
}
174180
</div>
@@ -198,57 +204,109 @@ const ExpressCheckout = () => {
198204
onChange={ updateIsPaymentRequestEnabled }
199205
/>
200206
</div>
201-
<div className="express-checkout__icons">
202-
<div className="express-checkout__icon">
203-
<ApplePay />
204-
</div>
205-
<div className="express-checkout__icon">
206-
<GooglePay />
207-
</div>
208-
</div>
209-
<div className="express-checkout__label-container">
210-
<div className="express-checkout__label">
211-
{ __(
212-
'Apple Pay / Google Pay',
213-
'woocommerce-payments'
214-
) }
207+
<div>
208+
<div className="express-checkout__subgroup">
209+
<div className="express-checkout__icon">
210+
<ApplePay />
211+
</div>
212+
<div className="express-checkout__label-container">
213+
<div className="express-checkout__label">
214+
{ __(
215+
'Apple Pay',
216+
'woocommerce-payments'
217+
) }
218+
</div>
219+
<div className="express-checkout__description">
220+
{
221+
/* eslint-disable jsx-a11y/anchor-has-content */
222+
isPaymentRequestEnabled
223+
? __(
224+
'Apple Pay is an easy and secure way for customers to pay on your store. ',
225+
'woocommerce-payments'
226+
)
227+
: interpolateComponents( {
228+
mixedString: __(
229+
/* eslint-disable-next-line max-len */
230+
'Apple Pay is an easy and secure way for customers to pay on your store. {{br/}}' +
231+
/* eslint-disable-next-line max-len */
232+
'By enabling this feature, you agree to {{stripeLink}}Stripe{{/stripeLink}} and' +
233+
"{{appleLink}} Apple{{/appleLink}}'s terms of use.",
234+
'woocommerce-payments'
235+
),
236+
components: {
237+
stripeLink: (
238+
<a
239+
target="_blank"
240+
rel="noreferrer"
241+
href="https://stripe.com/apple-pay/legal"
242+
/>
243+
),
244+
appleLink: (
245+
<a
246+
target="_blank"
247+
rel="noreferrer"
248+
/* eslint-disable-next-line max-len */
249+
href="https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/"
250+
/>
251+
),
252+
br: <br />,
253+
},
254+
} )
255+
/* eslint-enable jsx-a11y/anchor-has-content */
256+
}
257+
</div>
258+
</div>
215259
</div>
216-
<div className="express-checkout__description">
217-
{
218-
/* eslint-disable jsx-a11y/anchor-has-content */
219-
interpolateComponents( {
220-
mixedString: __(
221-
'Boost sales by offering a fast, simple, and secure checkout experience.' +
222-
'By enabling this feature, you agree to {{stripeLink}}Stripe{{/stripeLink}}, ' +
223-
"{{appleLink}}Apple{{/appleLink}}, and {{googleLink}}Google{{/googleLink}}'s terms of use.",
260+
<div className="express-checkout__subgroup">
261+
<div className="express-checkout__icon">
262+
<GooglePay />
263+
</div>
264+
<div className="express-checkout__label-container">
265+
<div className="express-checkout__label">
266+
{ __(
267+
'Google Pay',
224268
'woocommerce-payments'
225-
),
226-
components: {
227-
stripeLink: (
228-
<a
229-
target="_blank"
230-
rel="noreferrer"
231-
href="https://stripe.com/apple-pay/legal"
232-
/>
233-
),
234-
appleLink: (
235-
<a
236-
target="_blank"
237-
rel="noreferrer"
238-
href="https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/"
239-
/>
240-
),
241-
googleLink: (
242-
<a
243-
target="_blank"
244-
rel="noreferrer"
245-
href="https://androidpay.developers.google.com/terms/sellertos"
246-
/>
247-
),
248-
},
249-
} )
250-
/* eslint-enable jsx-a11y/anchor-has-content */
251-
}
269+
) }
270+
</div>
271+
<div className="express-checkout__description">
272+
{
273+
/* eslint-disable jsx-a11y/anchor-has-content */
274+
isPaymentRequestEnabled
275+
? __(
276+
'Offer customers a fast, secure checkout experience with Google Pay. ',
277+
'woocommerce-payments'
278+
)
279+
: interpolateComponents( {
280+
mixedString: __(
281+
/* eslint-disable-next-line max-len */
282+
'Offer customers a fast, secure checkout experience with Google Pay. {{br/}}' +
283+
/* eslint-disable-next-line max-len */
284+
'By enabling this feature, you agree to {{stripeLink}}Stripe{{/stripeLink}}, ' +
285+
"and {{googleLink}}Google{{/googleLink}}'s terms of use.",
286+
'woocommerce-payments'
287+
),
288+
components: {
289+
stripeLink: (
290+
<a
291+
target="_blank"
292+
rel="noreferrer"
293+
href="https://stripe.com/apple-pay/legal"
294+
/>
295+
),
296+
googleLink: (
297+
<a
298+
target="_blank"
299+
rel="noreferrer"
300+
href="https://androidpay.developers.google.com/terms/sellertos"
301+
/>
302+
),
303+
br: <br />,
304+
},
305+
} )
306+
/* eslint-enable jsx-a11y/anchor-has-content */
307+
}
308+
</div>
309+
</div>
252310
</div>
253311
</div>
254312
<div className="express-checkout__link">
@@ -313,34 +371,41 @@ const ExpressCheckout = () => {
313371
<div className="express-checkout__description">
314372
{
315373
/* eslint-disable jsx-a11y/anchor-has-content */
316-
interpolateComponents( {
317-
mixedString: __(
318-
'Link autofills your customers’ payment and shipping details to ' +
319-
'deliver an easy and seamless checkout experience. ' +
320-
'New payment experience (UPE) needs to be enabled for Link. ' +
321-
'By enabling this feature, you agree to the ' +
322-
'{{stripeLinkTerms}}Link by Stripe terms{{/stripeLinkTerms}}, ' +
323-
'and {{privacyPolicy}}Privacy Policy{{/privacyPolicy}}.',
324-
'woocommerce-payments'
325-
),
326-
components: {
327-
stripeLinkTerms: (
328-
<a
329-
target="_blank"
330-
rel="noreferrer"
331-
href="https://link.co/terms"
332-
/>
333-
),
334-
privacyPolicy: (
335-
<a
336-
target="_blank"
337-
rel="noreferrer"
338-
href="https://link.co/privacy"
339-
/>
340-
),
341-
},
342-
} )
374+
isStripeLinkEnabled
375+
? /* eslint-disable max-len */
376+
__(
377+
'Link autofills your customers’ payment and shipping details to deliver an easy and seamless checkout experience.',
378+
'woocommerce-payments'
379+
)
380+
: interpolateComponents( {
381+
mixedString: __(
382+
'Link autofills your customers’ payment and shipping details to ' +
383+
'deliver an easy and seamless checkout experience. ' +
384+
'New payment experience (UPE) needs to be enabled for Link. ' +
385+
'By enabling this feature, you agree to the ' +
386+
'{{stripeLinkTerms}}Link by Stripe terms{{/stripeLinkTerms}}, ' +
387+
'and {{privacyPolicy}}Privacy Policy{{/privacyPolicy}}.',
388+
'woocommerce-payments'
389+
),
390+
components: {
391+
stripeLinkTerms: (
392+
<a
393+
target="_blank"
394+
rel="noreferrer"
395+
href="https://link.co/terms"
396+
/>
397+
),
398+
privacyPolicy: (
399+
<a
400+
target="_blank"
401+
rel="noreferrer"
402+
href="https://link.co/privacy"
403+
/>
404+
),
405+
},
406+
} )
343407
/* eslint-enable jsx-a11y/anchor-has-content */
408+
/* eslint-enable max-len */
344409
}
345410
</div>
346411
</div>

‎client/settings/express-checkout/style.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
&__description {
1818
color: #757575;
19+
font-size: 12px;
1920
}
2021

2122
&:not( :last-child ) {
@@ -74,12 +75,20 @@
7475
padding: 12px;
7576
border: 1px solid #007cba;
7677
border-radius: 2px;
78+
font-size: 12px;
7779

7880
a {
7981
text-decoration: none;
8082
white-space: nowrap;
8183
}
8284
}
85+
&__subgroup {
86+
display: flex;
87+
align-items: center;
88+
&:not( :last-child ) {
89+
margin-bottom: 1.4em;
90+
}
91+
}
8392
}
8493
}
8594
}

0 commit comments

Comments
 (0)