Update Checkout appearance section to display WooPay checkout preview UI #7511
Conversation
lovo-h
added
category: projects
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: -1.16 kB (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
lovo-h
requested review from
a team and
cesarcosta99
and removed request for
a team
lovo-h
added
the
priority: high
It seems like this comma was accidentally merged. This commit removes it since it appears to be unintentional.
|
@lovo-h thanks for your work on this enhancement. Super excited about this. It'll be a good improvement for merchants evaluating or setting up WooPay. @nikkivias would appreciate your eyes on this before it's pushed to production. Desktop: Looks good. It's a bit hard to tell from the video, is the preview policy text legible in your opinion? Thoughts on the button loading component? Is that a standard loading component @nikkivias ? Regarding the logo, the image formats I believe I provided the copy for that. Do we in fact support all of those image formats? Double checking. Mobile: Is it your phone font setting that makes the input text appear to be oversized? The preview also looks super tiny. Is it possible to increase the width of the preview to be same width at the section below it? |
|
@nikkivias would you recommend that the preview on desktop also make use of the extra available width? |
There was a problem hiding this comment.
Changes look good and tests well 😎 I left a few nitpick comments but the only blocker here is the image formats we accept for the logo.
- The preview of the WooPay checkout looks accurate ✅
- Both the logo and custom text are correctly applied at the WooPay checkout ✅
- Removing the logo reverts to the store name at the WooPay checkout ✅
Another suggestion, if that's not a big deal, would be to stretch the preview to the content area in the mobile view, as follows:
@pierorocca, here's a better view of the desktop version:
The text is barely legible but does indicate the general shape of the text and how it would appear on the checkout page. We may be able to increase the text size to make it more legible by reducing the horizontal white space. But in order to do this, I will need an updated Figma design; since I am using the SVG as my source. Here is what the Figma design currently looks like:
Source: nngbiDUWyJa7fYcpiE9Jdu-fi-5649_4058.
Good question. Currently, we only support
Actually, in this case, I was using Chrome's Dev Tools to preview how it would look on a mobile device. I agree though, the input text does look oversized. Here's how it appears on my mobile device (iPhone):
It looks about the same 🤔
I agree, that would be a good solution. At the moment, I am importing the design layout as an SVG, from the Figma designs. So, in order to update the preview on mobile, I will need new Figma designs (tailored for mobile). Also, for the Desktop version, if we are able to update the Figma designs so that we use more of the empty space, we may be able to make the text more legible. Once the designs have been updated, I can import and use the new SVGs. @nikkivias, are we able to make these changes on Figma? |
|
Sorry for the brevity as I'm on mobile on meet-up. Let's adjust the copy to match existing capability and we can decide to support additional formats as a new enhancement issue. |
A key objective of the preview is to allow the merchant to view the wording of the policy text. I've left a comment on the Figma file outlining the problem with legibility, especially on mobile. |
pierorocca
added
status: blocked
|
The mobile input font size, what do you believe is causing it to be so huge relative to the size on desktop? |
|
That looks terrific @nikkivias. Here's the other preview I was referring to. The Express Payments checkout button has settings associated with it and we display a preview of the button appearance below. Note because I'm on a work profile on Chrome, GPay doesn't render but it would if I was signed in on my personal Chrome account.
|
|
That button setting is looking a little too tall and could use some reworking too |
|
I'm loving the direction this is taking! One thing to keep in mind as we review this PR is that we'll need it merged tomorrow to make it into 6.7. @lovo-h I don't have a solid grasp on the scope of any given request on this issue, but we'll want to keep that deadline in mind and may need to make some trade offs to be sure we hit that. |
|
@nikkivias there's an open enhancement issue resulting from a recent user flow review. Welcome your feedback on the proposed design. #6470 |
|
@pierorocca, @nikkivias, here is how the latest changes appear: When resizing the window dKZJT1.mp4When updating the Policies and custom text & the Checkout logo qTLy4s.mp4 |
|
Looks fantastic. Thanks all for the iterative collaboration. It's amazing to see how small adjustments have such huge impact on the final result. LGTM. |
|
That was amazingly quick! Looking good! I would just note to add that bit of shadow and border radius I added to the actual preview. |
Great catch @nikkivias. The shadow and the border-radius have been added:
|
There was a problem hiding this comment.
- Everything is working as in the first review ✅
- The checkout preview is responsive ✅
I've found two issues that we might want to consider addressing still in this PR.
- In any viewport, the height of the preview is bigger than the container when the custom text is empty, making the box-shadow overflow the section.
- Should we account for line breaks here? The line breaks present in the textarea are not reflected at the WooPay checkout or the preview. This is slightly unrelated to the goal of this PR, so I think it'd be ok to address in a different PR. cc @pierorocca
Nice catch! All of us missed that in the demos. That definitely should be resolved prior to merge.
This can wait until we either support markdown or add rich text capable editor. The key thing is that we can surface the store policies. Longer term I'd like to see 1:1 alignment with the checkout policy block + some minimal custom rich text via an easy to use wysiwyg editor. |
@cesarcosta99, great catch! Fixed in 4692f5b. |
|
Here's a demo with the fix applied: cdHeYc.mp4 |
|
@lovo-h it appears that the shortcode links don't render in the preview. Instead [privacy_policy_link] and [terms_of_service_link] render. We missed that as it wasn't a part of any of the previews. Thanks @csmcneill for catching this pre-release. Can you replicate this on your site? |
|
Also this is out of scope of this issue, Chris also makes a good point that on core the shortcode links are [privacy_policy] and [terms]. Would it make sense to keep consistent? |
@pierorocca, I was able to replicate this on my site. A fix has been created in #7601.
I went ahead and made these shortcodes consistent in the Policies and custom text input box (for the WooPay checkout preview). But we may still need to create a separate issue for making them consistent in the Appearance > Customize > WooCommerce > Checkout > Privacy policy / Terms and conditions input boxes. |
|
Thanks @lovo-h for the quick fix. Will that make 6.7.0 or are we past that window?
Based on the demo in #7601 am I understanding correctly that for now we'll still use the _link version and we'll open a new issue to align between core and WooPay? |
|
Piero, we discussed this over Slack but to reiterate here:
It looks like WooPayments 6.7.0 has already been released. So, this will have to be included in the next release: WooPayments 6.8.0 (Nov 22).
Initially, that was the plan but since the changes were small enough, I went ahead and added it to #7601 in |
Fixes #6995
Changes proposed in this Pull Request
This PR updates WooCommerce > Settings > Payments > WooPayments > WooPay > Checkout appearance so that the WooPay checkout preview resembles the WooPay checkout page.
Testing instructions
Test: Store name and logo
Upload custom logobutton and upload one of the accepted image file types (e.g. HEIC, WEBP, SVG, PNG, or JPG).goOpZZ.mp4
Test: Checkout privacy policy
Policies and custom textfield.bWtB3g.mp4
Screen Caps
Mobile
Desktop
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge