Partner AMA: Checkout Extensibility

[Jacqui]

Join us starting Monday, July 22nd for an exclusive AMA for Shopify Partners. Our team of top engineers will answer questions related to Checkout Extensibility to help unblock your client’s upgrades by the August 13, 2024 deadline. 

What to know:

 This AMA is an opportunity to interact with the team who build Checkout Extensibility to get any questions answered on both the upgrade and newly released features.   

The AMA will be open from July 22nd - 26th. Hit “Reply” below to ask your questions. We’ll aim to answer questions within a 24-hour window. 

Rules of engagement:

We’ll do our best to follow up on every question during the event.

• You must be logged into your account on Community to participate.
• Assume positive intent with one another and be kind. Some users may be new and learning how to engage with the Community. 
• Be authentic and honest with your questions and answers.
• Do not ask for or share store admin login details or passwords.
• Like posts and threads that are of interest or helpful to you.
• Be constructive with criticism, not offensive.
• Share your experiences and insights whenever you can to support others. 
• Abuse, harassment, and spam content won’t be tolerated.

[enesefe]

Hello, Why is there a 100 KB limit on Theme App Extension files? Is it possible to increase from 100kb to 500kb for the size of Liquid across all files?

https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration#file-and-content...

[Gil_at_Shopify]

Hi there,

This AMA is for checkout extensibility such as checkout ui extensions. I think you'll want to post your question https://community.shopify.com/c/online-store-and-theme/bd-p/storedesign or https://community.shopify.com/c/shopify-apps/bd-p/shopify-apps.

[JuanCarlos_wac]

is the Native Address Validation on Checkout extensibility coming on other countries like the US, for example Spain and Portugal? T.

[Gil_at_Shopify]

Hi Juan,

You can find a full list of supported countries for Address validation here:
- https://help.shopify.com/en/manual/checkout-settings/address-collection-preferences
- https://help.shopify.com/en/manual/orders/manage-orders/shipping-address-validation

Please note that support for Portugal is already included.

[alazortakoy]

Hello hope you are doing well, 

Can we determine if a store has activated its Checkout extensibility through any API, specifically for the Checkout and Thank You pages for Plus stores, and the Thank You page for all other stores?

Thanks.
Alaz Ortaköy

[Gil_at_Shopify]

Hi Alaz,

You can use the Admin Graphql API and query checkoutProfiles which will return a checkoutProfile node. If you use the 2024-07 version or later, it will have a typOspPagesActive field to denote if the Thank you page is on extensibility. If at least one checkoutProfile node isPublished is set to true, then the store is on extensibility. If no profiles are published, then the store is on checkout.liquid (Plus only).

[ara4]

Hello!

Thanks for doing this AMA. I have a few questions/notes:

1. Can you give app developers the ability to know the location of the app block on the checkout page so it can be used/accessed for analytics?
2. Potential bug: When a selling plan is added to a line item Shopify fires off a discount_code change event even though there are no changes in discount codes. Can you please look into this?
3. Can you consider adding an endpoint to hit or a fire an event to know when our app block is added or removed from the checkout page?
4. When allowing stores to customize colors in the app block, we can only pick from a predetermined list of theme colors names (accent, critical, warning etc.), rather than actual colors. It would be great if we could either:
   
   1. Let stores select any color they'd like OR
   2. Provide app developers with an easy way to know the hex codes a store has selected for each of those color names so we can display the actual color to stores when they are customizing their app block experience.

Thank you!

[Gil_at_Shopify]

Hi there,

1. What sort of location data are you looking to access? We surface the extension target in the api as well as the buyer journey active step: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/buyer-journey#standardapi-property....  
2. Can you file an issue on https://github.com/Shopify/ui-extensions/issues?  
3. Can you let me know what sort of action you are looking to take when receiving this?
4. Checkout branding does not surface specific colors/hexes as some areas are dynamically computed to ensure accessibility with the right color contrast levels. Since the colors can change depending on where the app block is added within checkout as well as the surface (Shop Pay vs regular checkout) it will not always be the same. Are you looking for the raw color values due to your preview experience existing outside of Shopify's checkout editor and inside your app? 

[ara4]

1. Yes you give us the target but we want more granular data when it comes to dynamic targets such as purchase.checkout.block.render. We want to know where the extension is rendered (checkout location) within this target. For example, is the extension rendered in the order summary? Shipping?
2. We will file an issue and post a link here
3. We want to know when a merchant has successfully added the app block so we can remove messaging in our app that guides them to add an app block. Conversely, if a merchant removes our app block, we want to know so we can let them know that their features are no longer enabled. 
4. Yes, exactly. We want the raw color values because our preview experience exists in our app. 

[PatrickJakubik]

We urgently need access to checkout metafields within the Checkout Validation function input. Is there a chance this could be added in the near future?

Here's our current situation:

1. We're collecting additional data from buyers in checkout extension.
2. We're saving this data to metafields using applyMetafieldsChange with type set to updateMetafield.
3. We've tried using the useBuyerJourneyIntercept hook, but it's not 100% reliable.
4. The hook can be easily bypassed because it runs on the client side.

Having access to checkout metafields in the Validation function would solve these issues and significantly improve both buyer and merchant experience. Any insights on when this might be implemented?

This has been raised on Github here and here.

Thank you!

[Steven_Janczy]

Hi, the short answer is that for passing data from a UI extension to a function, we recommend using cart attributes for the time being. We do plan to expose cart metafields to function inputs, but we are not planning to expose "checkout" metafields to function inputs.

I'm a little bit unsure of if you are looking for "checkout" or cart metafields since the linked issues mention cart but the question includes "checkout", feel free to clarify and I can expand further.

[PatrickJakubik]

Hey Steven!

Thank you for reply! That's what we do right now, although there are some problems:

1. There are rare cases where cart attributes are getting out of sync with metafield or not getting set at all

2. They are "cluttering" Order view in Admin and many merchants and agencies are complaining on that

3. They cannot be deleted from checkout extension

I'm unsure if the metafields I'm setting in checkout UI extension with "updateMetafield" type are called cart or checkout metafields. Naming is bit confusing 😅 That's how I set it, maybe you can help clarify? Thanks a ton!

[Steven_Janczy]

Cart metafields are of type "updateCartMetafield" whereas "updateMetafield" is for "checkout" metafields. 

I acknowledge the pain point you are seeing, and I think I think it mostly comes down to us needing to modernize our metafield APIs in checkout UI extensions. We built that API over 3 years ago and we have some work planned for next year to make it less confusing. 

As a side note, we do plan to add removeAttribute sooner than that, we'll update our public roadmap when timing is confirmed.

[ShipNotIncluded]

Where abouts do we access the public roadmap? Is it this: https://shopify.dev/docs/apps/build/checkout

[TheBarn]

In the documentation it says that the Checkout scripts app will not expire till August 2025. Can we confirm that means the old checkout scripts will still work for another 12 months?

This would be useful as the new checkout functions are missing some vital features, like being able to target line items by properties (used by many apps for discounting)

[Gil_at_Shopify]

Hi there,

The Shopify Script Editor will be officially sunset on August 28, 2025 and will continue to function until then but we recommend moving off as soon as you can per https://help.shopify.com/en/manual/checkout-settings/script-editor.

For line item discounts by properties, you should be able to accomplish this using a Product Discount on 2024-07 using the new CartLineTarget: https://shopify.dev/docs/api/functions/reference/product-discounts/graphql/common-objects/target and checking a specific attribute (property) on the CartLine: https://shopify.dev/docs/api/functions/reference/product-discounts/graphql/common-objects/cartline. Would this resolve your missing feature?

[LizRideal]

I would like to introduce a function that displays a checkbox that says 'I agree to the Terms of Use', and if the checkbox is ticked, I can click the 'Confirm Order' button, and if it is not ticked, I cannot click it.

We would also like to display different checkbox text for 'regular products' and 'subscription products'. Furthermore, we would like to display a text prompting the user to check the box if they click the 'confirm order button' when it is not ticked. Is this feasible with applications on the App Store?

[Gil_at_Shopify]

Hi Liz! Have you taken a look at the Checkout Blocks app? It's by Shopify and free. You can conditionally show custom fields like an agree to terms and it can show for product based conditions. It will save to the order as either a metafield, note, or cart attribute (you decide).

[bootsgridDev]

If the user is not subscribed to the payment settings, I just want to hide my checkout extension from the theme customizer Add block section. Is it possible in any of the way, for now In checkout extension we can customize the functionality according to the subscription status, All I want to do is just Hide my checkout extension from the Add block section in Theme customizer.

[Gil_at_Shopify]

Hi there,

While you can't hide app blocks within the checkout editor selection panel, you can save the subscription status for your app to a shop level metafield. You can then retrieve that within the checkout ui extension via the metafields section in the app config toml: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields.

Then inside the checkout ui extension code, you can look for the extension.editor.type and see if it's set to "checkout" which means the merchant is viewing your extension in the editor and conditionally show a message in the checkout editor when a merchant has not subscribed to your paid plan and return `null` when not in the editor (a normal checkout flow):

[bootsgridDev]

I appreciate the response @Gil_at_Shopify ,

 This is What I exactly follow for now, I just want to know is there a plan to any improvement in the future updates.

Thank you in advance.

[cherriecoder]

I am having problems with my query. I am trying to access the storefront API to query the customer's information in the checkout extensibility.  

I know we can do useCustomer or buyerIdentity but that's if you're logged in. I want to be able to query the customer's information through email in case theyre not logged in. I specifically want to access the tags. I get an error "Field 'customer' is missing required arguments: customerAccessToken"

useEffect(() => {
        query(
          `query getCustomer ($first: Int!, $email: String!) {
            customer(first: $first, query: $email) {
              id
              email
              firstName
              lastName
            }
          }`,
          {
            variables: { first: 1, email: `email:${customerEmail}` },
          }
        ).then(({data, errors}) => {
            console.log('data', data);
          })
  },[customerEmail, shippingAddress, customer, query])

[Gil_at_Shopify]

Hi Cherrie,

It's important to note that the Storefront API in checkout ui extensions does not support customer queries in checkout: https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/configuration#api-access. the data available to query is anything listed under "unauthenticated" scopes which is basically data any customer would have access to.

For customer account extensions on the order status page, I believe you can use the Customer Account API as detailed here: https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/customer-account-api.

[vbjornsson]

First off, thanks for doing this AMA!

I have a few issues I'm dealing with in upgrading to checkout extensibility:

1)  I am working on converting a Script into a Automatic Discount Function. I have created the discount app and it seems to be working fine, but the last piece is to prevent the automatic discount from being applied to product variants that have a compare at price higher than the price.

Using Shopify Scripts, we were able to access .compare_at_price, but I am not seeing anything similar in GraphQL ProductVariant object. Is there any way for me to access the compare at price in the extension?

2) Is there any way to hide line item properties in the checkout page using checkout extensions? Some of our custom products have a bunch of custom properties added to which are currently hidden via checkout.liquid but not sure how to do that with the new checkout. More details here: https://community.shopify.com/c/extensions/how-to-hide-item-properties-and-discount-in-checkout/td-p...

3) Is it possible to modify how the price is displayed on line items in the cart? For example, not showing the discounted cost or modify the wording of "No Charge"

Thanks in advance!

-Victor

[Jacqui · Accepted solution]

AMA CLOSED

Thank you to all who participated in this Partner AMA for Checkout Extensibility! No new questions will be accepted moving forward. 

Our team will continue to respond to questions already asked as they are able, but some questions might not be answered. If your question goes unanswered you're welcome to post on one of our Partner boards in the community.

Make sure you check out our Checkout Extensibility Upgrade board which has many FAQs and docs for you and your clients.