Add Payment Request button support for Woo blocks #1529

ricardo · 2021-04-07T23:01:44Z

Fixes #1416
Fixes #1544
Fixes #1677

Changes proposed in this Pull Request

Add Payment Request blocks integration. The code is adapted from the Stripe Payment Gateway (1467-gh-woocommerce/woocommerce-gateway-stripe).
Use same normalization functions and API in blocks and shortcode.
Remove some leftover code from shortcode integration (e.g. clearCart, unnecessary i18n and nonce variables) and make shortcode integration more similar to the classic checkout by using the WCPayAPI.
Fix 3D Secure / SCA confirmation with payment request buttons.

There are a few improvements left to do:

Perhaps change folder structure, moving everything related to blocks into client/blocks/. - This requires changing the current credit card checkout as well.
Add loading indicator to PRB when 3DS modal is open or intent is being validated. - Not really related to this PR, as it applies to the shortcode implementation too.

Testing instructions

Run npm run build:client.
Install Gutenberg and WooCommerce Blocks.
Create a second cart page and add the cart block to it.
Create a second checkout page and add the checkout block to it.
Test using the payment request button in the product, cart and checkout pages, both shortcode and blocks.
Verify that the button shows up as expected.
Verify that the order is created as expected when the payment succeeds.

Added changelog entry (or does not apply)
Covered with tests (or have a good reason not to test in description ☝️)
Tested on mobile (or does not apply)

asumaran · 2021-04-27T02:46:05Z

@ricardo I've tested my PR #1642 on top of your branch and didn't see any issue. My PR affects the Product page only.

ricardo · 2021-04-27T03:07:52Z

@asumaran Thanks for testing it. I was concerned the changes I made to the payment request button class could break your PR.

reykjalin

Just noticed that Google Pay does not have a light-outline theme; only dark and light:

PRB	Network request

I think the fix for this is basically just to map light-outline to light?

reykjalin

When you fail the 3DS authentication while paying with a PRB the error message isn't properly formatted:

reykjalin

This is all coming along nicely! I think there's just some minor comments on the code, and the issues I pointed out ^ above.

I'm going to do some more testing, especially to make sure the shortcode flow is still working as expected following the changes to the API, but I think this is all generally looking pretty good ☺️

I really like how you've been able to adapt the Stripe implementation to fit better into the WCPay codebase. Excellent work! 👏

client/payment-request/event-handlers.js

client/payment-request/utils/normalize.js

client/payment-request/utils/utils.js

reykjalin

This is sort-of unrelated to this PR, but I'm reporting it here anyway; @ricardo please let me know if I should move this to a different issue/PR

When I tried to pay through the credit card form with a card that will be declined (4000 0000 0000 0002) I don't get the expected Card declined error, and instead get this generic message at the top of the checkout page:

Error Message	Credit Card Form

The PRB shows the expected error message in the correct place.

reykjalin

It seems the aforementioned issue with failing 3DS verification through a PRB might be an issue that existed before this PR, since the product page shows the exact same result:

reykjalin

Related to the light-outline button not showing up correctly it works on the Product page, so that's definitely new with this PR.

ricardo · 2021-04-29T05:19:18Z

This is sort-of unrelated to this PR, but I'm reporting it here anyway; @ricardo please let me know if I should move this to a different issue/PR

Please move to a new issue 👍

I have seen this error before, but didn't connect the dots. Well observed though.

It's probably because the block credit card method is still using the generic Gutenberg checkout endpoint to create the order, and that's not throwing any specific response from Stripe.

ricardo · 2021-04-29T06:29:40Z

Just noticed that Google Pay does not have a light-outline theme; only dark and light:

Great catch! I changed the behavior a little bit, after looking at how Stripe renders the actual Google Pay button. The light version does not have a box-shadow.

I had to add a small vertical margin so that the ~~outline~~ shadow doesn't get cut by overflow: hidden in the blocks layout.

Fixed in ffb0de4

It seems the aforementioned issue with failing 3DS verification through a PRB might be an issue that existed before this PR, since the product page shows the exact same result:

The issue was actually generated from this PR 😬

Fixed it in eb615a7.

reykjalin · 2021-05-01T00:58:47Z

This is sort-of unrelated to this PR, but I'm reporting it here anyway; @ricardo please let me know if I should move this to a different issue/PR

Please move to a new issue 👍

Issue opened in #1706

reykjalin

Just 2 minor comments on the updated PRB styling, but otherwise this looks good!

All the issues I encountered during my previous review have been fixed! Awesome work! 👏

Let's get that CSS fixed (possibly with the help of @LevinMedia) and then get this shipped 🎉

reykjalin · 2021-05-01T01:04:32Z

client/payment-request/style.scss

 		&:active {
 			background-color: #fff;
 		}
 		&:hover {
 			background-color: #f8f8f8;
 		}
 		&:focus {
-			box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
 			outline: 0;
 		}


We need to include the box-shadow here to indicate whether the element is focused when (for example) navigating via the tab key.

Personally, I think we should allow the purple outline set by WC Core, since that's really universal throughout WC pages; I don't see why we would remove that. Maybe @LevinMedia has some thoughts on that, design-wise?
The box-shadow on its own is very difficult to notice.

We should also make sure this is the same across both Stripe and WCPay, so what we decide to do here, I will also do in Stripe. For now I just added the box-shadow back in Stripe.

Good point about the accessibility issue.

I removed the box-shadow because the Google Pay button that Stripe renders (when you have the wallet available) doesn't have a box-shadow.

Apparently, it uses the same styling as :hover, so perhaps the right thing to do is to use:

&:hover, &:focus { background-color: #f8f8f8; }

We can remove the box-shadow styling from :focus in the light-outline theme too. Stripe adds the same styling as in :hover.

The Stripe plugin version of this is not the best version of this either IMO, so I'd really like to get @LevinMedia's 👀 on this 🙂

I'll ping him in Slack 👍

EDIT: Nevermind, he's AFK until tomorrow so I'm not going to ping him now. Let's not leave this as a blocker, but if we haven't merged before he's back (tomorrow) I think it's worth it to have him take a look at this ☺️ .

reykjalin · 2021-05-01T01:05:10Z

client/payment-request/style.scss

@@ -46,13 +60,13 @@
 			background-color: #3c4043;
 		}
 		&:focus {
-			box-shadow: #5f6368 0 1px 1px 0, #5f6368 0 1px 3px;
 			outline: 0;
 		}


Same as above ^, we need to include the box-shadow at the very least, and maybe allow the outline too.

Stripe also removes the outline property. I guess the best here is to be compliant with Stripe's standards. Using the same background-color as in :hover fixes this.

…tion

…ettings

…tcode

Co-authored-by: Kristófer Reykjalín <[email protected]>

LevinMedia · 2021-05-06T14:30:42Z

@reykjalin @ricardo - let's just use the styling that stripe provides for now - I'm hesitant to use a specific color outline for focus since it may not always work with a theme's styles 👍

…blocks

asumaran · 2021-09-27T23:25:39Z

client/payment-request/event-handlers.js

+};
+
+export const shippingOptionChangeHandler = async ( api, event ) => {
+	const response = await api.paymentRequestUpdateShippingDetails( event );


@ricardo it should've been event.shippingOption. I'm submitting a PR fixing it.

ricardo added the pr: in progress label Apr 7, 2021

ricardo mentioned this pull request Apr 15, 2021

Configurable payment request button locations #1584

Merged

3 tasks

ricardo force-pushed the add/1416-payment-request-support-for-woo-blocks branch 3 times, most recently from 9aec227 to c8a8123 Compare April 22, 2021 21:29

ricardo force-pushed the add/1416-payment-request-support-for-woo-blocks branch from c8a8123 to a079411 Compare April 26, 2021 09:16

ricardo added pr: needs review and removed pr: in progress labels Apr 26, 2021

ricardo force-pushed the add/1416-payment-request-support-for-woo-blocks branch from 4104b3b to 6d7755f Compare April 26, 2021 23:45

ricardo requested a review from dechov April 27, 2021 00:14

ricardo requested a review from reykjalin April 28, 2021 13:55

reykjalin suggested changes Apr 28, 2021

View reviewed changes

client/payment-request/event-handlers.js Show resolved Hide resolved

client/payment-request/utils/normalize.js Outdated Show resolved Hide resolved

client/payment-request/utils/normalize.js Outdated Show resolved Hide resolved

client/payment-request/utils/utils.js Show resolved Hide resolved

reykjalin suggested changes Apr 28, 2021

View reviewed changes

ricardo requested a review from reykjalin April 29, 2021 16:23

ricardo mentioned this pull request Apr 29, 2021

Add support for Cart and Checkout Blocks woocommerce/woocommerce-gateway-stripe#1467

Merged

7 tasks

reykjalin mentioned this pull request May 1, 2021

Add specific error message during "card declined" errors when using the blocks-based checkout #1706

Closed

reykjalin suggested changes May 1, 2021

View reviewed changes

reykjalin added pr: needs author reply pr: needs design review and removed pr: needs review labels May 1, 2021

ricardo force-pushed the add/1416-payment-request-support-for-woo-blocks branch from 3c2caa9 to 5632861 Compare May 1, 2021 01:51

ricardo and others added 18 commits May 5, 2021 22:26

Remove stripe-utils, remove unnecessary variables from use-initializa…

5d60efc

…tion

Fix PRB php tests

05387bf

Use get_gateway() in WC_Payments_Blocks_Payment_Method instead of s…

cce81ca

…ettings

Move shouldUseGooglePayBrand to utils and use same function in shor…

fa7a5c1

…tcode

Updating old comments and some cleanup

033b6c5

Add changelog entries

9fc996a

Fix button type

9ee98bb

Fix Google Pay light-outline button

5073cd2

Use useLocalizedGoogleSvg hook.

37786e8

Fix 3DS error message

fff7cdd

Add optional chaining operator to all normalization props.

1e16cc5

Update normalize cartTotalItems with filter first

2c63d68

Co-authored-by: Kristófer Reykjalín <[email protected]>

Fix linter error on normalizeLineItems

9125c7a

Fix Google Pay :focus styling

89dbf0a

Restore ajax_get_cart_details

50d710e

Update old total and old requestShipping when cart is updated

3358f22

Improve block paymentRequest event listeners logic

c813036

Return cleanup function in useEffect

5b2980c

ricardo force-pushed the add/1416-payment-request-support-for-woo-blocks branch from bef480e to 5b2980c Compare May 6, 2021 01:26

ricardo added pr: needs review and removed pr: needs author reply labels May 6, 2021

reykjalin added pr: ready to merge and removed pr: needs review labels May 6, 2021

Merge branch 'develop' into add/1416-payment-request-support-for-woo-…

782b74f

…blocks

ricardo merged commit 09092e3 into develop May 6, 2021

ricardo deleted the add/1416-payment-request-support-for-woo-blocks branch May 6, 2021 16:35

ricardo mentioned this pull request May 7, 2021

3D Secure card + Payment Request support on Block checkout woocommerce/woocommerce-gateway-stripe#1528

Closed

asumaran reviewed Sep 27, 2021

View reviewed changes

a-danae mentioned this pull request Sep 29, 2021

Add specific error message during "card declined" errors when using the blocks-based checkout woocommerce/woocommerce-blocks#4870

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Payment Request button support for Woo blocks #1529

Add Payment Request button support for Woo blocks #1529

ricardo commented Apr 7, 2021 •

edited

Loading

asumaran commented Apr 27, 2021

ricardo commented Apr 27, 2021

reykjalin left a comment

reykjalin left a comment

reykjalin left a comment

reykjalin left a comment •

edited

Loading

reykjalin left a comment

reykjalin left a comment •

edited

Loading

ricardo commented Apr 29, 2021

ricardo commented Apr 29, 2021

reykjalin commented May 1, 2021

reykjalin left a comment

reykjalin May 1, 2021

ricardo May 1, 2021 •

edited

Loading

ricardo May 1, 2021

reykjalin May 3, 2021 •

edited

Loading

reykjalin May 1, 2021 •

edited

Loading

ricardo May 1, 2021

LevinMedia commented May 6, 2021

asumaran Sep 27, 2021

Add Payment Request button support for Woo blocks #1529

Add Payment Request button support for Woo blocks #1529

Conversation

ricardo commented Apr 7, 2021 • edited Loading

Changes proposed in this Pull Request

Testing instructions

asumaran commented Apr 27, 2021

ricardo commented Apr 27, 2021

reykjalin left a comment

Choose a reason for hiding this comment

reykjalin left a comment

Choose a reason for hiding this comment

reykjalin left a comment

Choose a reason for hiding this comment

reykjalin left a comment • edited Loading

Choose a reason for hiding this comment

reykjalin left a comment

Choose a reason for hiding this comment

reykjalin left a comment • edited Loading

Choose a reason for hiding this comment

ricardo commented Apr 29, 2021

ricardo commented Apr 29, 2021

reykjalin commented May 1, 2021

reykjalin left a comment

Choose a reason for hiding this comment

reykjalin May 1, 2021

Choose a reason for hiding this comment

ricardo May 1, 2021 • edited Loading

Choose a reason for hiding this comment

ricardo May 1, 2021

Choose a reason for hiding this comment

reykjalin May 3, 2021 • edited Loading

Choose a reason for hiding this comment

reykjalin May 1, 2021 • edited Loading

Choose a reason for hiding this comment

ricardo May 1, 2021

Choose a reason for hiding this comment

LevinMedia commented May 6, 2021

asumaran Sep 27, 2021

Choose a reason for hiding this comment

ricardo commented Apr 7, 2021 •

edited

Loading

reykjalin left a comment •

edited

Loading

reykjalin left a comment •

edited

Loading

ricardo May 1, 2021 •

edited

Loading

reykjalin May 3, 2021 •

edited

Loading

reykjalin May 1, 2021 •

edited

Loading