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.

[Gabriel01]

When will it (if ever) be possible to move/hide core checkout elements such as the Discount Code field? Also, any plans for advanced validation of custom input fields beyond Regex or length?

[skel24]

Hello! We're thinking about how we might make the discount input at checkout more configurable but I don't have a date for any changes yet. Can you tell us more about your use case?

[TR_Page]

There's been an open github issue on this since June 2023 and you'll find a lot of discussion there as well

For discount code fields, it's a really common use-case to want to hide this. A lot of this has to deal with a merchant who maybe doesn't want to deal with the back and forth of conflicting ux around automatic discounts when a customer tries to input their own only to find the automatic discount is best deal.

Only current way to remove discount field at checkout is to remove every single discount in the shop? Wild. At least with checkout extensibility this should be possible but even better would be settings for merchant in admin.

[jineshd]

Is there a way to auto-remove or auto-add product from cart when a discount code is applied?

Use case 1: Sometimes the free gift product becomes ineligible if cart value goes below x (can happen when customer applies discount code on checkout)

[skel24]

Hello! Today the best way to achieve this is with checkout UI extensions. They have access to the products in the cart, as well as discount codes applied. The UI extensions can use the cart API to add/remove products from the cart.

[yktech]

hey I am not sure if this is the rigth place but I was looking for a answer for some time 

I was told by a shopify representative by show that you are working on multi shipping (one order shipping to multiple addressees) and that its in the pipeline is there any timeline for when we can expect this feature

[akat_]

hi there! We recently launched split shipping in checkout where an order arriving in multiple packages can surface this information in checkout. There are no timelines on whether/when one order going to multiple destinations will be supported. Are you able to share any details about the use case you are trying to achieve? 

[yktech]

Hi

the season i am asking is because of the new split shipment in shopify and i was think that that is heading in the same direction to allow to split the shipment to also different addresses 

for the use case we have a lot of customers buying holiday gifts for family and friends living across the us sending even up to 30 deliveies at once with our current system and after looking at giftShip and multiShip which are good solution it still lacks some features we need like order import from the front and backend and these are also very slow

[ShipNotIncluded]

Two questions:

1. Can we get the ability to order pickup location in the checkout? Can do it in custom checkout.liquid but not in the new way.
2. There is an issue with the useBuyerJourneyIntercept running on stale data (https://github.com/Shopify/ui-extensions/issues/1571) that is affecting us a lot. Is this being investigated?

[ShipNotIncluded]

Others:

3. How to properly detect in Checkout Extensions if Shipping or local pickup has been selected even when there are no options? That is, if shipping is selected in the UI, but there are no shipping rates, there are no delivery groups. Likewise, if Local Pickup is selected but no stores have enough stock to fulfil the cart, there are no delivery groups.

4. When there are no delivery/pickup options, extensions using the render-before and render-after targets aren't rendered at all. What is the workaround for these? (We want to show an error to the user if they wanted to do local pickup (not delivery), but some items in the cart are preventing it).

[michaelelmgreen]

3. This is a limitation at the moment and is a future enhancement which we will consider.

4. Static extension targets are bound to the section they are a part of, so are hidden when that section is also hidden. The alternative is to use a dynamic extension point and one of the placement references we provide for dynamic extension targets e.g. [DELIVERY1] or [DELIVERY2] placements. Take a look at https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/extension-targets-overview#checkout-loca... for more information. We'll also consider the feedback and whether we should still render these extensions in the event where no delivery groups are returned, but Shopify shows the UI that no options are available.

[ShipNotIncluded]

3/4: Thank you for your notes. However, using a dynamic reference won't help.

We are trying to acheive two things:

• Block checkout progress (with useBuyerJourneyIntercept, https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/buyer-journey) if doing delivery and it contains items with given metafield data or if local pickup ad the store selected in the pickup list is not available/different to the store they selected during browsing (saved as a cart attribute).
• Allow the user to remove the affecting cart items (whilst staying the in the checkout) based on the above conditions

Thus we need to know if delivery/shipping is chosen, as the item checking and blocking is different.

Attempts:

1. Use a dynamic target, and distinguish which option is being displayed is by checking the deliveryOptions.type (https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/delivery) - if it is pickup, then that is selected, otherwise, it is delivery. However (as noted), if the deliveryOptions obect is empty (shipping not available, not suitable pickup locations), the selected option is not knowable. 
2. Use the Shipping/Pickup location specific targets (purchase.checkout.shipping-option-list.render-before, and purchase.checkout.pickup-location-list.render-before) so that progress blocking and specific item check would only occur when that section was displayed. However, the pickup/shipping list targets aren't rendered at all when there are no options for that section.

[VictorNF]

Hey @ShipNotIncluded , can you pls clarify what you mean by "order pickup location in the checkout"?

[ShipNotIncluded]

As it to change the displayed order of the pickup locations (e.g. alphabetically, distance from the customer, by state, etc).

[VictorNF]

Hey @ShipNotIncluded - custom sorting is not currently possible (right now it is distance from the customer by default). However, you can implement custom filtering in the Delivery Option Generator (e.g. remove all locations that dont meet a given criteria and return only X locations). 

[michaelelmgreen]

Hi there and thanks for your questions.

1. The local pickup delivery option generator function does allow you to filter the local pickup options that are shown. You can learn more about the function allowing you to write custom filtering logic here: https://shopify.dev/docs/api/functions/reference/local-pickup-delivery-option-generator

2. Thanks for flagging this, we are investigating on our end. Our engineering team has added a comment on the public issue, and you are welcome to continue engaging there to help us narrow down the problem.

[ShipNotIncluded]

1. Unless I have misunderstood, that API is for adding new local pickup delivery options, not for changing the display order of the existing local pickup locations.

2. Thank you, I will have a look at that.

[Brecht]

Is there a way to hide the billing address fields?

These are not compatible with the merchant's current ERP system, so we have hidden them with CSS in the past.

[simon_bolduc]

Hi, 

What are the compatibility issues with the ERP? 

You can consider using the "require billing address and shipping address to match" setting in checkout settings, which will hide the billing address form on the payment step.

https://help.shopify.com/en/manual/checkout-settings/address-collection-preferences#require-shipping...

[Brecht]

Hi Simon,

This specific ERP can't handle different billing addresses.
The merchant uses third party payment methods like Mollie. The setting "require billing address and shipping address to match" doesn't work with this third party payment method?

I see in the documentation that it only works with Credit card & Apple Pay. Most customers here do not pay by credit card.

[veeramahesh]

Are there any updates on this? We tried using applyAttributeChange with API version 2024-07, but we now receive the error: "applyAttributeChange is not supported on this checkout. Consider checking 'instructions.attributes' first." Is applyAttributeChange just not supported for draft orders, or are we doing something wrong?

[ShipNotIncluded]

Do you have sample code you can share? And have you tested with both standard and draft orders? That might help track down the issue.

[veeramahesh]

I tested in both standard and draft order,it works on standard orders but in draft orders it is showing error 
sample code :

import {
reactExtension,
Banner,
BlockStack,
Checkbox,
Text,
useApi,
useApplyAttributeChange,
useInstructions,
useTranslate,
} from "@shopify/ui-extensions-react/checkout";

// 1. Choose an extension target
export default reactExtension("purchase.checkout.block.render", () => (
<Extension />
));

function Extension() {
const translate = useTranslate();
const { extension } = useApi();
const instructions = useInstructions();
const applyAttributeChange = useApplyAttributeChange();

// 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
if (!instructions.attributes.canUpdateAttributes) {
// For checkouts such as draft order invoices, cart attributes may not be allowed
// Consider rendering a fallback UI or nothing at all, if the feature is unavailable
return (
<Banner title="tetsing-checkout-fields
" status="warning">
{translate("attributeChangesAreNotSupported")}
</Banner>
);
}

// 3. Render a UI
return (
<BlockStack border={"dotted"} padding={"tight"}>
<Banner title="tetsing-checkout-fields
">
{translate("welcome", {
target: <Text emphasis="italic">{extension.target}</Text>,
})}
</Banner>
<Checkbox onChange={onCheckboxChange}>
{translate("iWouldLikeAFreeGiftWithMyOrder")}
</Checkbox>
</BlockStack>
);

async function onCheckboxChange(isChecked) {
// 4. Call the API to modify checkout
const result = await applyAttributeChange({
key: "requestedFreeGift",
type: "updateAttribute",
value: isChecked ? "yes" : "no",
});
console.log("applyAttributeChange result", result);
}
}

[ShipNotIncluded]

I have a feeling that it is just not supported for draft orders. I think most people see this because apps use draft orders as a workaround to Shopify's 25 (really, 5) discount limit. Draft Orders though are really meant for creation by merchants, with a final checkout link sent to the customer - the customer shouldnt be able to add extra discounts, or attributes, etc onto the order.

https://changelog.shopify.com/posts/plus-merchants-can-now-use-apps-built-with-compatible-ui-extensi...

[Steven_Janczy]

Hi and thanks for your question. You are correct that cart attributes are not supported on draft order checkouts. The following APIs are/can be unavailable in draft orders.

Our recommendation is to use metafields (https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/metafields#standardapi-propertydeta...) if you need to store custom data, as these will be converted to order metafields once the checkout is completed. Be sure to use "metafields" and not "cart metafields" as cart metafields do not persist to the order.

Refer to this tutorial to read more about setting metafields from a UI extension in checkout.

[TheBarn]

We have checkouts that have a TITLE dropdown field in the customer address forms.

At the moment it looks like we can't insert fields into the address forms only add new fields above or below them, which does not work for this purpose.

Is there any way to add fields within the address or any plans for Shopify to natively support titles in customer records?

[simon_bolduc]

Hi,

Thanks for the question.

We are not currently planning to add a title field to the address form in checkout.

[TheBarn]

Can you also confirm there is no way to insert fields within the shipping and billing address forms.

[simon_bolduc]

Yes correct, it's only possible to add custom fields below or above the address forms.

[AlinaBeauty]

I couldn't find a solution for "Access denied for quantityAvailable field. Required access: `unauthenticated_read_product_inventory` access scope" on ProductVariant. I've added 'unauthenticated_read_product_inventory' to the scope in the TOML file and I can see it from my Shopify Partners Dashboard in configured scopes.

I found this discussion https://community.shopify.com/c/shopify-apps/access-denied-for-quantityavailable-field-required-acce... but no one really has a solution for it. I am not using any headless plugins. Only the checkout extension. How can I fix it?

[AlinaBeauty]

And this one also talks about the same error without a solution: https://community.shopify.com/c/shopify-apps/unauthenticated-read-product-inventory-scope-not-applyi...

[VictorNF]

Hey @AlinaBeauty  - can you pls share app ID and shop ID? We cannot replicate the problem. Initially it seemed like a conf problem.

[AlinaBeauty]

Hi @VictorNF 

I think the app id is 122369769473 and the shop is 20-wigs. 

This is current config for it.

And here is the query:

query ($id: ID!, $first: Int!) {
        collection(id: $id) {
          products(first: $first) {
            nodes {
              id
              title
              images(first: 1) {
                nodes {
                  url
                }
              }
              variants(first: 1) {
                nodes {
                  id
                  price {
                    amount
                  }
                  quantityAvailable
                }
              }
            }
          }
        }
      }

Thank you.

[VictorNF]

Thanks! We were able to reproduce. However, due to storefront access tokens being statically declared for all UI extensions, and the sensitivity for some merchants with providing product inventory counts, we do not currently plan to add this specific scope to the extensions storefront query API.

[AlinaBeauty]

But it is a part of Storefront API documentation, so I am not certain how can it be out of scope? How can I make sure I don't pull and try to sell products that are out of stock through an upsell block?

[Steven_Janczy]

Thanks for clarifying the use case. It's true that it's part of the storefront API, but as Victor mentioned in his previous comment, inventory counts are considered sensitive by certain merchants, and we don't currently have a mechanism for allowing conditional scopes to be requested/included in the UI extensions. For your use case, we recommend checking the availableForSale field since that should return false if the product is out of stock. 

We also have this public issue that you can keep an eye on longer term

[JayAdra]

Hey there!

It was recently brought to my attention that gift cards can't be used for deferred purchase options. What's the reason for this?

Additionally, is this something we'll be able to override/change via extensibility? Or are there already plans to support this in the future?

Thanks!

[Tejas_Mehta]

Hi @JayAdra,

This indeed a gap in the platform with all purchase options and something that the team is working to fix natively in the near future. Unfortunately there isn't a way for you override this gap via extensibility. We will let you know once this is fixed.

Best,

Tejas

[ShipNotIncluded]

Can the ability to remove an attribute within the checkout be added: https://github.com/Shopify/ui-extensions/issues/1059

It was raised as an issue in July 2023, but there doesn't look to be any traction on it since then, aside from many people requesting it.

[skel24]

Hello! This is on our roadmap and we will keep you posted when the timing is confirmed. 

[trinityctcw]

I am currently creating an NextJS webapplication as my Storefront for my Customers. However since the most recent update Shopify has removed the Checkout API and Replaced it fully by the Cart API.

Now It's meant to use the checkoutUrl returned when creating or retrieving a Cart for checkout. My Issue is that when I use that url it's the following structure: 

https://trinityctcw.com/cart/c/fjsdgdkfsd8f70457hfjskgfs?key=45783645300hfdjsf

However since I haven't programmed anything on this path, I land on the 404 Not Found page. Previously It would send me to: https://my-shopify.myshopify.com/ etc. and bring me to the shopify checkout pages and let me checkout there. 

This results in the following question. Has shopify allowed fully custom checkouts now and if so what ressources to do I use to do so, or is there a new way of getting the correct checkoutUrl. 

Here is my the link from the shopify.dev documentation that I've been using: 

Cart API: https://shopify.dev/docs/api/storefront/2024-07/queries/cart
Checkout to Cart API Migration: https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/migrate-to-cart-...

Additional Info: I'm using Headless App by Shopify and I host my webpage on Vercel which runs with Nextjs. 

[vix]

Hi @trinityctcw - Glad you are migrating to the Cart API, lots of additional features and performance gains through this flow. The Cart API is designed to redirect the buyer to the Shopify Web Checkout - the same as the WebURL in the deprecated Checkout mutations. The difference you are seeing is that the Cart API is pulling the domain from your shop domain vs. (incorrectly) displaying the .msyhopify.com URL. The URL is a redirect which would go from something like.. 

* https://shop-domain/cart/c/Z2NwLXVzLXdlc3QxOjAxSjNFRTJHMThKQVQ1NjVWSEdaMFNQTjdC?key=0b782002fd763629...

and land on...

* https://shop-domain/checkouts/cn/Z2NwLXVzLXdlc3QxOjAxSjNFRTJHMThKQVQ1NjVWSEdaMFNQTjdC

This redirect happens automatically, however it sounds like your custom domain has logic to 404 on this path. Can you please look into your domain configuration?

[VGM137]

Hi, thanks for the communication chanel.

I'm currently trying to use pickup point extension to create options dinamically but the FetchInput keeps sending empty cart items and attributes in the request to my server, I see from the community that this is actually an issue from Shopify, but I wonder if you have find a way around it or if this will be fixed soon?

Hope you're doing well, thanks again

[skel24]

Hello and thanks for your question! We shipped a tiny fix for this last week, and any remaining requests missing cart info should be resolved now that the serialize function cart beta is 100% rolled out (as of yesterday).

Can you confirm if this is resolved on your end or are you still seeing this issue?

[VGM137]

Yeah actually working better now since yesterday, thanks for the update

[VGM137]

though now I can't debug the function from the executions panel from the app dashboard and I don't know what I'm doing wrong because it was working right and suddenly it stop replying, this has not happened before. Is this a problem with the unstability of the api?

[skel24]

Nothing has changed with the API so I don't think that's the issue. We need to gather more info to properly look into it. Are you able to provide the shop ID and app? Alternately - you can email pickup-point-generator-early-access@shopify.com to get direct support for issues with pickup points. 

[VGM137]

something happend with the debuggin at the time of my comment, but trying it again today worked again just right, thanks for the help.

[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...