How to preview thank you page purchase.thank-you.block.render?

Extensions
1

hey folks, I can’t seem to preview or view by any means while doing local development - my render block in the Thank you page.

  • started dev server locally with cli. opened the url and see the link to “purchase.thank-you.block.render Copy preview link for purchase.thank-you.block.render to clipboard” - I opened this and pay with bogus payment method… doesn’t render any of my blocks.

Do you have a recommended way to preview this url with the dev code?

tsx

import {
  reactExtension,

  Text,

} from "@shopify/ui-extensions-react/checkout";



function Confirmation() {
  return <Text>Lorem ipsum dolor sit amet</Text>;
}

export const thankYouBlock = reactExtension('purchase.thank-you.block.render', () => <Confirmation />);

my toml

# 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-10"

[[extensions]]
name = "name-transparent-thank-you-ui"
handle = "name-transparent-thank-you-ui"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/ThankYouPage.tsx"
target = "purchase.thank-you.block.render"
export = "ThankYouBlock"

[extensions.capabilities]
api_access = true
network_access = true 

[extensions.settings]
[[extensions.settings.fields]]
key = "api_url"
type = "single_line_text_field"
name = "API URL"
description = "https:/lorem-ispum.ngrok-free.app"
2
Extension not rendering

If your checkout UI extension isn’t rendering in the checkout flow, then you might be testing using a development store that doesn’t have the Checkout and Customer Accounts Extensibility developer preview enabled.

Could you please confirm?

2 Likes
3

hi @AMaL , thanks for your reply.

How can I turn this on? Do I need to create a brand new dev store or it can be toggled? can’t seem to find how.

So, I’m a bit confused here: users need to turn on a setting for my extension to be visible??

are there two ways to interact with the thank you page or I’m wrong?

Our payment extension is part of a transparent payments app (we created a payment gateway app) this extension is meant to show payment related information in the Thank you page (that we fetch from our api) not sure if this is the correct approach to do this…

thanks for your help

5

Ensure that the export names in both the .toml file and the code are identical. Please use the thankYouBlock in toml file :

module = "./src/ThankYouPage.tsx"
target = "purchase.thank-you.block.render"
export = "thankYouBlock"