[Start here] Checkout extensions feedback

[akatigbak]

The Checkout extensions team is looking for your feedback on all things checkout extensions! Here are some questions we’d like to get your thoughts on:

• How did you approach writing your extension? Did you find everything you needed in our developer docs?
• What parts of development did you find challenging or delightful? What would you like to see in extension points, extensions APIs and UI components?
• Is there any other feedback you want to share? What can we add, remove, or change to help you help merchants succeed?

[gil--]

Love love love the current iteration. Really great improvement over the post purchase UI components (more flexible, more options).

Here's some early feedback:

API

• useRunningTotal(): No shipping or tax totals. You surface the overall total but that doesn't provide any breakdown on shipping costs. If I want to show a special input based on shipping costs or show an upsell based on subtotal, that doesn't appear possible.
• useBuyerIdentity: Any possibility of surfacing customer segmentation? Would be amazing to show specific checkout extensions to specific customer segments. Merchants could then show offers based on historical purchases, etc all with segmentation.
• useLineItems(): Any possibility of surfacing the other variants on a product? Would make upselling to a larger sku (small shampoo to large) much easier.

Dynamic Extension Location

Currently, if we use the Checkout::Dynamic::Render extension point, it provides no information to our code which mount location (ORDER1, etc) is being shown. Can you pass that information down to our extensions? A use case I have in mind is showing different content layouts within the same extension depending on where it's shown.

Product Data Fetching

Given the complexities with showing live product data in checkout (multi-locale, multi-currency, multi-location inventory, high volume checkouts on Plus), is there any plan to make this easier? Perhaps fetching product data via Storefront API through a React Hook? Or transform Product metafield references into the product data on load? Just some guidance and if possible, api helpers would be tremendously helpful in making performant extensions.

Styles

Are there any plans to expose the Checkout branding api to extensions? I realize most of it is abstracted through the components but I have some ideas for using custom inline SVGs and it would be great if we could style them with the correct colors using style props.

[philieurokt]

Can we also (unless it's possible and I missed this) get a boolean flag of some sort denoting that an extension is in the checkout editor? I'd love to show a message when it's not fully configured rather than no extension rendering in the checkout editor.

@gil-- I'd also like to have this. Did you figure out a workaround in the meantime?

I think you can use the useExtensionEditor hook to determine that. https://shopify.dev/docs/api/checkout-ui-extensions/unstable/react-hooks/metadata/useextensioneditor

[shafy]

Can we also (unless it's possible and I missed this) get a boolean flag of some sort denoting that an extension is in the checkout editor? I'd love to show a message when it's not fully configured rather than no extension rendering in the checkout editor.

@gil-- I'd also like to have this. Did you figure out a workaround in the meantime?

I think you can use the useExtensionEditor hook to determine that. https://shopify.dev/docs/api/checkout-ui-extensions/unstable/react-hooks/metadata/useextensioneditor

Unfortunately that only gives you info about the editor (e.g. Checkout editor). Additionally, I would need something accessible via the Admin API anyways.

[philieurokt]

Can we also (unless it's possible and I missed this) get a boolean flag of some sort denoting that an extension is in the checkout editor? I'd love to show a message when it's not fully configured rather than no extension rendering in the checkout editor.

@gil-- I'd also like to have this. Did you figure out a workaround in the meantime?

I think you can use the useExtensionEditor hook to determine that. https://shopify.dev/docs/api/checkout-ui-extensions/unstable/react-hooks/metadata/useextensioneditor

Unfortunately that only gives you info about the editor (e.g. Checkout editor). Additionally, I would need something accessible via the Admin API anyways.

Oh, I see. Yeah, I can't see any way we can get that information at the moment.

[michaelelmgreen]

Hey @gil-- @nboliver wanted to loop back and update this thread and say "we heard you" and we shipped improvements to increase the granularity of the info available on the order totals API. Check it out here. Hope this helps! 🎉

[gil--]

@michaelelmgreen Thank you! Was calculating subtotal myself but this is more efficient (no looping through all lines). Appreciate it!

[patryk-smc]

I would like to show UI extension and capture additional information only with specific shipping methods, although it doesn't seem like there is an API that returns the selected shipping method. Same with payment methods. If these things are not going to be supported, it would be nice to mention that in docs, I had to dig deep in types to make sure.

[nboliver]

@davetheunissen

The roadmap was updated recently. Looks like July for being able to read presented/selected shipping options https://shopify.dev/docs/apps/checkout

[michaelelmgreen]

Hey folks - correct that we are currently working on the APIs for both of presented/selected shipping options and presented/selected payment options with the payment options likely to ship first very soon, and shipping to come in June or July. I'd super appreciate some detail / examples of any of the use cases for UI extensions conditional on the selected payment method if you can share those.

[michaelelmgreen]

Hey people, as an update here we did ship APIs last week which allow you to read the selected payment method.

• Presented
• Selected

Please let us know if you have any feedback on these!

[michaelelmgreen]

Hi everyone - wanted to let you know we just shipped the API to read the presented/selected shipping and delivery options via the deliveryGroups API. Check it out!

[davetheunissen]

Hey @michaelelmgreen are there any plans to allow us to set the delivery option?
In my use case, I want to dynamically set the delivery option based on the day of the week / holiday periods.

[agroebe]

Are there any chances checkout UI extensions will be available for standard Shopify plans (non-Plus stores) in the future?

I have a very specific use case for extending checkout for microtransactions in my video game. I would like to use Shopify as my storefront for these microtransactions, and to do so I need to collect additional information at checkout for automatic fulfillment (related to the user account in-game)

I have been waiting for UI extensions for months because I would like to use Shopify for my storefront, only to be disappointed that only Plus stores can use it.

It seems to be eliminating the point entirely of introducing them in the first place, which I assume should be to allow unique use-cases like mine, but the barrier to entry is still there with Plus-only store requirement.

[PaulNewton]

I need to collect additional information at checkout

What's the gap? for any of the below could you elaborate what the limitation is?

• cart-attributes at /cart for online-sales channel
• custom-storefront (create checkout example with customattributes)
• What about backend automation to do auto fulfillment using the api once the order is placed?

Also Shopify Flow should now be accessible to all plans and there is capture-payment action that would work with auto-fulfillment settings

Note: there is no fulfill action listed for some reason but devs can make customs triggers aka flow connecters for use on stores with advanced and plus plans.

[callummcmaugh-er]

Coming from an app developer point of view, checkout UI extensions for non-Plus stores would help create a scalable solution for multiple clients.

Cart attributes do work, but this isn't scalable as every client has some speicifc need to fulfill and generally don't have development resources available to implement them.
Another trend that's prominent is skipping the cart page entirely and going to checkout from a slideout or modal etc. or the "buy it now" button that's native to stores.

It seems that checkout UI extensions was going to be a great oppourtunity that would allow a frictionless implementation for all Shopify stores, but it's really just made modifying checkout.liquid easier. Which is great don't get me wrong, but I'm left a bit envious of a broader solution.

[rohanrajpal]

Hey, I too would love to know if there are any plans to support non plus stores :)

[Maskey2]

Will checkout extensibility allow users to add any input field like we have for Cart pages as "Cart Attribute", and product pages as "line properties"? We are looking to add a checkbox on the checkout page where customers can check the box if they are tax exempt.

[gil--]

Yes. You can do this following their custom field tutorial: https://shopify.dev/apps/checkout/custom-fields You can save data to note, note attributes (cart attribute), and metafields.

[chaoocharles]

I am getting the following error when I try to deploy an extension

Validation errors found in your extension toml file
└ Missing expected key(s).

The following is the shape of my extension tolm file

type = "checkout_ui_extension"
name = "shop-dev-ext00"

extension_points = [
'Checkout::Dynamic::Render',
]

[[metafields]]
namespace = "my-namespace"
key = "my-key"

[capabilities]
network_access = true

Which expected key(s) am I missing?

[mcompeau-shopify]

Hi @chaoocharles, we've received similar bug reports elsewhere and are currently looking into this issue. Just wanted to followup to see if you did try downgrading your CLI version and whether that had any affect?

[chaoocharles]

Hi, it did not work for me. I was not able to create an app directly using @shopify/cli 3.0.27, I thought I would do something like npm init @shopify/app@3.0.27, it din't work.

Creating an app using npm init @shopify/app@latest and then downgrading the CLI introduce other errors, so it dint deploy either.

[pepicrft]

👋🏼 @chaoocharles
I tried to reproduce your issue but I was not able to do so. Let's try the following:

1. Make sure @shopify/app and @shopify/cli in your project's package.json have the version ^3.3.2.
2. Delete package-lock.json and node_modules and run npm install to force pulling the latest version of the de @shopify/x dependencies.
3. Run npm run -- shopify --version and confirm your version is 3.3.2.
4. Run npm run -- deploy

If it continues to fail, please, run npm run -- deploy --verbose and share the logs here. Please, hide any sensitive information from the logs.

[chaoocharles]

@pepicrft Thanks for the response. I just wanted to let you know that this did not work, and there are more complaints here: https://community.shopify.com/c/shopify-apps/checkout-ui-extension-deploy-error/td-p/1656126

I am not sure what to exclude from logs, maybe I can share them in private though...

[chaoocharles]

I think the issue was fixed. It works now with the current version "@shopify/cli": "3.5.0"

[andacg1]

Is Shopify Functions also scheduled to be released in September alongside the rest of checkout extensions?

[ebryson]

We’re aiming to make Functions generally available around the same time as Checkout UI extensions, at the end of September. Hope to share more details in the coming weeks about exact dates.

[chienit3bk]

How can I check where extension in ? In edit theme or in storefront

[akatigbak]

hi! Here's a page with some options to test locally or via the checkout editor: https://shopify.dev/apps/checkout/test-ui-extensions

[chaoocharles]

When I add an offer(item) to cart using useApplyCartLinesChange react hook, the count of the item doesn't persist in the cart when I click Continue to shipping. When I add the offer to cart then refresh the page and click Continue to shipping, it does persist. Any ideas on how to make the changes made with useApplyCartLinesChange persist without a refresh? or is this an issue the shopify team needs to take a look at?

[KTruong008]

I'm running into the same issue. It won't let me checkout either, it says "payment couldn't be processed because your order total has changed..."

Edit: Was browsing through the discord and it looks like they're aware of this issue, at least since the 25th of August.

[jarthorn]

Hi all, we are aware of this problem and you can follow this issue for updates: #448. We are hoping to have a fix out soon.

[andrewpye]

Checkout extensions are looking pretty exciting, thanks everyone that's been involved!

We encountered an issue deploying a checkout UI extension (via yarn deploy) at the Pushing your code to Shopify... step:

The code was not pushed to Shopify, but even running yarn deploy --verbose didn't give any insight into what the cause of the issue was. In the end we tracked it down to being caused by having a locale file that was out of sync with our base English locale file. Removing that outdated locale file (since we don't use it at this point) resolved the issue. It would be super-helpful if Shopify CLI could report the reason for deploy failures back to developers so that we don't have to spend time guessing what the issue might be 🙏 Thanks!

[jarthorn]

@pepicrft does this sound like a known CLI issue?

[ghost]

I am trying to implement Shopify Web Pixel. The pixel is not tracking any customer events. On checking the console found the error shown below. Any help would be appreciated.

[rhyek]

What is the best way to open a new browser window from a call-to-action inside a checkout extension? DOM APIs like window.open seem to not be available.

[rhyek]

I just noticed that checkout ui extensions are run as a Web Worker.

[rhyek]

Using this: https://shopify.dev/api/checkout-extensions/checkout/components/link

[ncardeli]

Exactly! For example, you could do this with the Link component:

<Link 
  to="https://www.shopify.com/" 
  external
>Call to action!</Link>

[ShirasuGyoza]

Hi, we've added checkout extension to our existing app and published on app setting on partner dashboard (screen shot).
It works properly on our development store's CheckoutEditor, but not shown on merchant store's CheckoutEditor. The merchant's store is Plus plan and installed our app.
Is there any other step to publish the extension to merchants??

[andrewpye]

@ShirasuGyoza does the merchant have the new checkout editor? We've seen that some merchants haven't had that functionality rolled out to them yet, which means that they don't have the ability to add the checkout extension to their store at the moment.

[ShirasuGyoza]

@andrewpye Oh thanks, if you know how can we know that the merchant's store doesn't have new CheckoutEditor?
They're Customize page of CheckoutEditor shows no section:

[andrewpye]

@ShirasuGyoza I can't read what the link text says in your screenshot. I've looked at two of my test stores – one with access to the new checkout editor and one without access. The one with access to the checkout editor looks like this:

Clicking the Customize checkout link takes me to the new checkout editor, which has an Add app button at the bottom which allows me to add my extension:

The store that doesn't have access to the new checkout editor looks like this on the customize theme -> checkout page:

Clicking the Open checkout settings link just changes to the Theme settings tab, with no way to add the checkout extension.

Hopefully that gives you the information you need to check whether the store you're looking at has access to the new checkout editor or not! 🤞

[ShirasuGyoza]

@andrewpye Thank you for details! My screenshot's checkout editor says like There are no sections here. [Edit theme setting here], so they might not have access to the new checkout editor.
I'll tell them about this. I hope Shopify can enable to access new editor when they request.
I really appreciate your help!

[andrewpye]

Sounds like that's the case @ShirasuGyoza. Happy we could find an answer! 😁

[Imran99]

Hey Guys,

I've been using checkout extensions for a new app. Some feedback:

Inventory Holds apply to all types of checkout extension

Even if your checkout extension has nothing to do with upsells, the order appears as On Hold if the user closes the tab when they get to the checkout extension experience. I think this should be separated out as its confusing for the merchant and causes panic. I've had customers ask me why the order is On Hold when they don't have any post purchase upsell apps installed. Checkout extensions that aren't doing upsells shouldn't put the order in the On Hold status. I know the hold eventually times out but merchants are really sensitive about installing anything that can impact orders in any way.

Insights > Extension errors never seems to display anything

Not sure if this was just in development, but I've never seen anything reported here, even when the extension did not load due to errors.

Extensions aren't shown for PayPal, Apple Pay, Google Pay etc

I can see far less interaction with the post purchase experience than I was hoping for because a lot of users checkout with paypal or other wallet services. It would be good if in these cases, you could fallback to displaying the post purchase experience somewhere on the thank you page or insert the post purchase experience after returning from the payment service but before the thank you page. I don't know if this is related to upsells again but if upsells were a seperate category to other types of checkout extension that do not modify orders then this is achievable and would increase engagement with the post purchase experience.

[gil--]

Hey so i don't think post purchase checkout extensions are covered under this thread but theoretically, I think Paypal should be firing for post purchase. It sometimes takes time for a merchant to be eligible as it uses automatic payment plans.

[rhyek]

Regarding checkout attributes, when using useApplyAttributeChange and useAttributes, are those bounded to the checkout ui extension of one shopify app? Can another shopify app (different provider) see attributes for another shopify app if both are installed on the same merchant store?

[gil--]

Any app can change them since they're at the cart level. You could look into using checkout metafields but they don't currently support app-owned metafields which means any app could also modify the metafield.

I'd maybe recommend prefixing the key to ensure it's not generic.

[rhyek]

Thanks. We are implementing an extension where users first need to authenticate to an external service (#368 (reply in thread)) and for the duration of the checkout process they will remain authenticated with a jwt.

Currently have it working as a proof of concept with checkout attributes as I mentioned (confused on the difference on cart vs checkout), but now looking at optimizations regarding security. Any recommendations now that I provided more context? Thanks.
edit: not -> now

[rhyek]

Is there a way to reliably identify a checkout ui extension that has network access capability when it reaches out to my backend? For example some unique identifier that can be generated during app install, stored in both shopify's app metadata and on my backend (app bridge), then later retrieved by the checkout ui extension and provide it during http requests to that same backend.

Barring this I suppose I could set an extension setting that is filled in by the merchant during install (checkout editor) with some key obtained from my backend. This setting's value retrieved by the checkout ui extension and the rest of the flow I outlined. I don't like that this requires manual steps for the merchant, though.

[lemonmade]

We are also working on a new API similar to the admin’s session tokens (https://shopify.dev/apps/auth/oauth/session-tokens), which I think would likely solve this need.

[michaelelmgreen]

SessionToken is now released. Tutorial coming soon!

[rhyek]

@michaelelmgreen thank you. any news on the tutorial or updated documentation? thinking of implementing this soon.

[whusted]

@michaelelmgreen bumping the above. Is a tutorial available yet?

[stevebosworth]

@rhyek @whusted we're still working on the session token tutorial but we did ship an update to our StandardAPI docs today with more details on how to start using session tokens and the details of the claims within the token.

https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token

Hope that helps! Let me know if there's any additional info that would be useful.

[davetheunissen]

Does anyone know if there is a way to hide the express checkout options? I have a customer who doesn't want it displayed.

[AndreaMorone]

Hi @davetheunissen, unfortunately not. The workaround is to use payment customizations to hide them but you will encounter 2 problems:

1. if you are on one page checkout, then you will hide payment options also from the bottom part containing the regular payment options;
2. if you are on 3 steps checkout, then there is a workaround, but if customer reach the last step and come back again, then he will see it again.

However if you want to give it a try, you could try HidePay (free for dev stores) and if satisfy your needs you can create your own payment customization.

Here it is the guide

[sachinaghera]

In checkout extensibility is there any way to put custom CSS?
I want hyper link without any underline

[MathiasGr]

Hi there,
I was trying to use Shop-level Metafields to store app configuration as the doc suggests, but I couldn't make it work with "reserved app prefix" namespace (namespaces starting with $app), some step of:

1. Adding the metafield to the TOML config file.
2. Calling from useAppMetafields in Checkout UI Extensions.

Does not support this $app placeholder. It's too bad because it's the only way to properly pass Shop-level data, correct? Can you help?

https://shopify.dev/docs/apps/custom-data/ownership

[gil--]

This has been a roadmap item for quite some time - https://shopify.dev/docs/apps/checkout#checkout-ui-extensions

New API for app-reserved namespace metafields (read/write) | Q1 2024

My best guess is not to expect this before April. For now, you can exclude the $app placeholder and just use a store-wide metafield which would work but any app could potentially overwrite.

[MathiasGr]

Got it, thanks for your answer

[gidiuselava]

Hi, customers are being blocked from checking out and conversion for stores is decreasing.

If mobile phone number has been entered it will not let you proceed whilst a Selling Plan is applied to a product in the cart. This is because you can not create a Shopify Account with a mobile number.

When please improve error messaging on page when Selling Plan is applied so customers can update the field.

See issue here: #1500

[MathiasGr]

Hi there,
It looks like the following doesn't work on the Order status page, is it expected?

  const appMetafields = useAppMetafields({
    type: "shop",
    namespace: APP_METAFIELDS_NAMESPACE,
  });

The same code, on the same extension, returns metafields when used inside the Checkout.

Thank you

[AndreaMorone]

I think is an expected behavior, if you look at the documentation it says:

Metafields are stored locally on the client and are applied to the order object after the checkout completes.

These metafields are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout.

Once the order is created, you can query these metafields using the GraphQL Admin API

We solved enabling network access in the extension and proxing a request to our backend to retrieve the metafield value.

Hope it helps 😉

[MathiasGr]

Hi @AndreaMorone thanks for your answer. As far as I understand, you're talking about the Checkout Metafields, but my question refers to App Metafields. App Metafields aren't checkout-specific, and according to the doc should still be available.

See https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/block/purchase-thank-you-block-render#standardapi-propertydetail-appmetafields

[AndreaMorone]

Oh you are right, my bad. As far as I know they work as expected, at least for us. We retrieve them like this in the thank you page and order status page (we do not specify “type”):

const metafields = useAppMetafields({ namespace: METAFIELD_NAMESPACE, key: METAFIELD_KEY, });

[MathiasGr]

Thank you, I'll double check, could also be tied to the ongoing Shopify outage. Are these Shop-level metafields you use?

[MathiasGr]

Update: it's working this morning, looks like it was a temporary outage 🤷

[gidiuselava]

Hi, it looks like Selling Plans do not work with Shop Pay and Express Checkout.

When we apply a Selling Plan to a product or all products in the cart, it crashes the express checkout section. If our checkout ui extension is positioned on the Shop Pay section of the checkout cart, it crashes the entire page.

Our Selling Plan implements a Pay % now and pay remaining balance of the cart 14 days later. Can someone please help us out.

const sellingPlan: CartLineChange = {
type: "updateCartLine",
id: cartLineId,
sellingPlanId: sellingPlanId,
};
const api = useApi();
await api.applyCartLinesChange(sellingPlan);

See full issue here: #1491

[marcatbelong]

Is there any reason that it is not possible to update checkout attributes when a customer is using accelerated checkouts?

We currently store delivery information in attributes, so I wanted to see if there were any plans to allow adding attributes during accelerated checkouts.

Seems notes can't be updated either, so seems like the preferred workaround would be to use metafields.

[rashedxyz]

What will be the best way to apply restrictions on the checkout UI extensions for the free app users without making a network call? AFAIK App Data Metafields are still not accessible from checkout UI extensions. Any suggestions?

[gil--]

Shop metafields are accessible.

[NeuroticCoder91]

Is there a Component roadmap available for Checkout and Customer Account Extensions?

I am particularly interested in handling form media upload inputs. We have a case where we would like the customer to be able to upload photos/drawings for us to customize orders as well as handling product reviews submissions.

[jun-shop]

Thank you for the feedback. You can find the current public roadmap here

[keithgulbroloop]

Has anyone gotten this demo to work for their dev store? I've been checking periodically and haven't seen any movement with regard to fixing the bugs related to displaying customer actions within the order card:

Notes:

• I am using a Shopify partner account with a corresponding dev store
• The demo code provided in the github repository is what I'm using with no changes

Shopify Github Tutorial for customer accounts -> order action menu extension

Should look like this:

But instead it looks like this with my store:

[valerii-stadnyk-moc]

Hey all,
Is there any way to check via API if the store’s Thank you and Order status pages are upgraded to Checkout Extensibility?
Merchants can see it in the checkout settings, but for app developers would be awesome to be able to check if merchants still use Script Tags or already migrated to Checkout Extensibility.

[gil--]

Yes, https://shopify.dev/docs/api/admin-graphql/unstable/objects/CheckoutProfile#field-checkoutprofile-typosppagesactive

[MathiasGr]

Would it be possible to access the Cart weight in the shipping method UI extensions? It would help for instance choosing the correct details based on the weight.

Thank you!

[MathiasGr]

Hey @gil-- , I can't figure out how to make localization work on the Order status page, it looks like it always defaults to English irrespective of the shop. Do you have more insight into why / how I can control which locale is shown the the customer?

[patrick-mcdougle]

Is there a way to use Polaris components in checkout / admin ui extensions? Some of the UI components aren't sufficient for building fully fleshed out apps. Combobox for example is nearly critical for a state/province picker which is not present.

[cjayalmontecm]

Hi @akatigbak and All , I'm currently building an app that has Shopify function(Cart and checkout validations) as extension. And I was trying to perform a fetch or API request to my public app but I'm getting this error Error while running JS: Adding tasks to the event queue is not supported, Does it mean it is not possible to perform API request on the Shopify function?

I have this initial code in my extension:

import type {
  RunInput,
  FunctionRunResult,
  FunctionError,
} from "../generated/api";
import axios from "axios";

interface InputType {
  cart?: {
      used_point?: {
          value?: string;
      };
  };
}

export function run(input: RunInput): FunctionRunResult {
  const usedPoint = parseInt((input as InputType)?.cart?.used_point?.value ?? "0");
  const points = fetchMemberPoint('7170122711205');
  

  const errors: FunctionError[] = usedPoint > points ? [
    {
      localizedMessage: "Used points is greater on you current points",
      target: "checkout"
    }
  ] : [];

  console.log("usedPoint: ", usedPoint);
  console.log("points: ", points);

  return {
    errors
  }
};

function fetchMemberPoint(customerId) {
  return axios.post('https://more-proud-goose.ngrok-free.app/api/point', {
    customerType: `${customerId}:POSTFIX`
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (response.status === 200) {
      return response.data;
    } else {
      return 0;
    }
  })
  .catch(error => {
    return 0;
  });
}

Also is there other way to perform validation after the user/customer clicks the Pay Now button and also prevent the completion of the order if its meets a certain condition?

[pramod-praella]

hey @cjayalmontecm
Shopify won't allow external API calls, the way is to use Metafield with functions.
Check this.

[cjayalmontecm]

hey @cjayalmontecm Shopify won't allow external API calls, the way is to use Metafield with functions. Check this.

Hello @pramod-praella, Thank you for your reply. Do you know way to add a function that will save value on my metafield once user clicks the Pay Now ? Currently I have UI Extension that was targeted on purchase.checkout.reductions.render-before . But I'm having hard time triggering it once user clicks the Pay Now (I'm planing to perform API request and saved the result in my attribute/metafield).