For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
Hi, I've developed a post purchase checkout extension that makes a call to the backend of the app to determine whether or not shouldRender should render. It works fine locally but doesn't work in production.
It seems like sometimes the API endpoint will be called and sometimes it will not.
In either case, the shouldRender return does not seem to work at all. I've tried removing the API call and directly calling:
return { render: true }
but even this does not work.
Here's the code I'm working with. Am I missing something about the admin settings or something?
extend("Checkout::PostPurchase::ShouldRender", async ({ inputData, storage }) => {
let shouldRender = false
let bundles = await getRenderData(inputData).then( bundlesArr => bundlesArr )
if ( bundles.length ) {
shouldRender = true
await storage.update({ bundles, orderTime: Date.now() });
}
return { render: shouldRender };
});
I was able to verify that the bundles variable is being populated with an array of objects, and like I said, it does work locally. Any help would be very much appreciated!
I would recommend reviewing the limitations for post-purchase extensions. Certain payment gateways, cart totals and multi currency orders will all stop the post-purchase extension from rendering.
The following limitations and considerations for post-purchase checkout extensions apply:
Area | Context |
---|---|
Payment provider | Third-party payment providers that require the customer’s CVN/CVV to be retained aren't supported. This might include, but isn't limited to, payment providers such as Braintree, Payflow Pro, PayPal Payments Pro, and Eway. |
Additional payment methods | The post-purchase page won't be surfaced in the following scenarios:
|
Purchase events | Third-party analytic services that use the Shopify Pixel API (such as Google Analytics, Facebook, Pinterest and Snap) report only the purchase event and value for the initial purchase. |
Analytics | Third-party analytics services that use the ScriptTag REST Admin API or GraphQL Admin API resource, or Additional Scripts have incomplete conversion data, because they're only triggered on the order status page. |
Duties and support for multiple currencies | Post-purchase upsell offers won’t be surfaced on orders with duties and multiple currencies. |
Order creation delays | In scenarios such as flash sales where the Shopify Platform is under extreme load, our system might optimize to capture orders but briefly delay the order creation step for a fast and seamless buyer experience. In these scenarios, post-purchase pages won't be surfaced, even if the request for the post-purchase page was properly made. |
Multiple apps | Merchants with multiple apps that have the post-purchase checkout extension need to select which app appears on the post-purchase page. You can use a banner during app onboarding to let merchants know that they can select your app as the default post-purchase app in the Shopify admin checkout settings. |
Fulfillment holds | Shopify places a hold on fulfillment for all orders undergoing a post purchase cross-sell flow. Holds are released either when the customer visits the order status page, or after a set amount of time, if the customer doesn't complete the post-purchase flow. If the customer doesn't complete the flow (for example, the customer closes the browser before actioning the post-purchase upsell offer), then the fulfillment hold is lifted one hour after submission of the initial checkout. Fulfillment holds are only supported using the FulfillmentOrder resource. |
Interaction with the order status page | The post-purchase page shouldn't be used as a replacement for the order status page. For more information, refer to the customer flow. |
API versioning | The post-purchase checkout extension APIs aren't versioned and don't follow the Shopify API versioning quarterly release schedule. |
Orders without a shipping address | If the customer's checkout results in the creation of an order without a shipping address, then you can't add a subscription to the order using post-purchase. For example, a customer might have bought only digital products, which doesn't require a shipping address. Similarly, a customer might choose local pickup as their delivery method, which also doesn't require a shipping address. You can determine in advance whether a shipping address exists by viewing the payment step within the ShouldRender extension point. If the destinationCountryCode input field is null , then no shipping address is set. |
Orders for local delivery | Post-purchase upsell offers won’t be surfaced on orders for local delivery. |
Minimum order price | Orders need to be $0.50 or more to qualify for post-purchase offers. |
Accepted offers | A customer can accept a maximum of two post-purchase offers for each checkout. |
Number of post-purchase pages | You can create only one post-purchase page. However, because a post-purchase extension is a single-page app, you can paginate the single page to create multiple pages. |
Sales channel | Orders need to be placed through the Online Store sales channel to qualify for post-purchase upsells. Other sales channels won't render post-purchase upsell pages. |
To learn more visit the Shopify Help Center or the Community Blog.
None of these issues seem to relate to the post purchase page not displaying. Even if we directly return
{ render: true }
like:
extend("Checkout::PostPurchase::ShouldRender", async ({ inputData, storage }) => {
return { render: true };
})
it still does not show. Are you able to look at the specific store the app is installed on in order to determine if something else may be wrong on Shopify's end?
If an order is a multicurrency order or any of the above limitations then the post purchase page will not render. It will not execute the code. {render: true} would not be executed.
Can you also confirm that you have turned on the post-purchase page on your new store? This is done in the admin in settings > Checkout > Post-purchase page.
To learn more visit the Shopify Help Center or the Community Blog.