I have shopify Plus store.
Store URL: https://nature-plus-shop-japan-staging.myshopify.com
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:
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’,> () =>
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.