Thank You Target Is Not Working In Checkout UI Extension

[springergarg]

Creating custom app for checkout UI extension. For the information and payment page my customizations are working and custom UI like checkbox is rendered on the checkout page but I am not getting why it is not working on the thank you page??

If shopify has some issues in checkout UI extension then they should at least extend the timelines because as of now I think there is a lot of improvement scope and there are many things which we can't do using this extension like for Link component if I want to add this css (text-decoration:none), I can't do.

But at least for thank you page it should be working and also specified in official documentation and also checked git example:

https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.footer.render-after/default.example.tsx

Still it is not working.

Let me explain what I did to achieve it, let me know the issue if you think any:

-> Step1: Create custom app and create the checkout UI extension

-> Step2: Install it on this plus store (https://nature-plus-shop-japan-staging.myshopify.com/)

-> Step3: Add target in extensions\rs-checkout-ui\shopify.extension.toml

other targets are commented only used three targets (purchase.checkout.payment-method-list.render-after, purchase.checkout.footer.render-after, purchase.thank-you.footer.render-after)

Learn more about configuring your checkout UI extension:

https://shopify.dev/api/checkout-extensions/checkout/configuration

The version of APIs your extension will receive. Learn more:

https://shopify.dev/docs/api/usage/versioning

api_version = "2024-01"

[[extensions]] type = "ui_extension" name = "rs-checkout-ui" handle = "rs-checkout-ui"

Controls where in Shopify your extension will be injected,

and the file that contains your extension’s source code. Learn more:

https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]] module = "./src/Checkout.jsx" target = "purchase.checkout.payment-method-list.render-after"

[[extensions.targeting]] module = "./src/CheckoutB.jsx" target = "purchase.checkout.footer.render-after"

[[extensions.targeting]] module = "./src/CheckoutC.jsx" target = "purchase.thank-you.footer.render-after"

[[extensions.targeting]]

module = "./src/CheckoutD.jsx"

target = "purchase.thank-you.block.render"

[[extensions.targeting]]

module = "./src/CheckoutE.jsx"

target = "purchase.thank-you.cart-line-item.render-after"

[[extensions.targeting]]

module = "./src/CheckoutF.jsx"

target = "customer-account.order-status.cart-line-item.render-after"

[[extensions.targeting]]

module = "./src/CheckoutG.jsx"

target = "purchase.checkout.header.render-after"

[[extensions.targeting]]

module = "./src/CheckoutH.jsx"

target = "purchase.thank-you.cart-line-item.render-after"

[extensions.capabilities]

Gives your extension access to directly query Shopify’s storefront API.

https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access

api_access = true

Gives your extension access to make external network calls, using the

JavaScript fetch() API. Learn more:

https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access

network_access = true block_progress = true

Loads metafields on checkout resources, including the cart,

products, customers, and more. Learn more:

https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields

[[extensions.metafields]] namespace = "springerNatureMetafields" key = "JapanList" [[extensions.metafields]] namespace = "springerNatureMetafields" key = "rowList" [[extensions.metafields]] namespace = "springerNatureMetafields" key = "UkList" [[extensions.metafields]] namespace = "springerNatureMetafields" key = "UsList" [[extensions.metafields]] namespace = "springerNatureMetafields" key = "privateAppURL"

Defines settings that will be collected from merchants installing

your extension. Learn more:

https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition

[extensions.settings]

[[extensions.settings.fields]]

key = "banner_title"

type = "single_line_text_field"

name = "Banner title"

description = "Enter a title for the banner"

-> Step 4: Created src/Checkout.jsx, src/CheckoutB.jsx & src/CheckoutC.jsx

-> Step5: Checkout.jsx & CheckoutB.jsx code is rendering perfectly (added footer links and one checkbox after payment list).

-> Step6: src/CheckoutC.jsx code:

import React from 'react'; import { BlockStack, reactExtension, Text, useApi, } from '@shopify/ui-extensions-react/checkout';

// 1. Choose an extension target export default reactExtension( 'purchase.thank-you.footer.render-after', () => , );

function Extension() { // 2. Use the extension API to gather context from the checkout and shop const {cost, shop} = useApi();

// 3. Render a UI return (

Shop name: {shop.name} cost: {cost.totalAmount}

); } But this code is not rendering on thankyou page why? And please guide me as shopify support refer me to discuss technical issues here and I am really stuck in this.

[bohan1]

Hi

I have the same problem, I have tried to chaged API version back to 2023-10, however no success!

Have you managed to solve this?

[aromal17]

Hi, I was also facing the same issue and turns out, it was an issue with the development store I was using. Ref: https://community.shopify.com/c/extensions/checkout-ui-extension-does-not-worked/td-p/1670196