Checkout UI component settings

Extensions
1

Hi,
We are trying to implement View in Thank you page. However, there doesn’t seem to be settings to:

  1. Set background to match that of other components’ backgrounds
  2. Display text with \n and format it correctly

See screenshot and code below. Am I doing something wrong?

<View border="base" padding="base" borderRadius="base" background="base">
  <BlockStack>
  ....
		<Text>
	  		hello world\nhello world 2
		</Text>	  
  </BlockStack>
</View>

thank you page
thank you page2416×718 76.1 KB

2

Your screenshot is of the Order status page, where you should use the Card component to match the background of other elements on the page.

On the thank you page, you don’t need that background color, since other page elements don’t have a background color.

Display text with \n and format it correctly
You should just use multiple <Text> elements instead of using \n.

3

Thank you @Kenza_Iraki ,

  1. Thanks for the tip on Card component. Is there a way to selectively import Components on one .jsx for purchase.thank-you.block.render vs. customer-account.order-status.block.render?
    For example, can I have one .jsx to handle both extensions targeting purchase.thank-you.block.render and customer-account.order-status.block.render with the following imports? This doesn’t work when targeting purchase.thank-you.block.render.
import {
  reactExtension,
  useApi,
  ...
  Button
} from '@shopify/ui-extensions-react/checkout';
import {
  Card
} from '@shopify/ui-extensions-react/customer-account';
  1. For \n issue, the string contains \n in it. I followed this Stackoverflow but it still didn’t work. It displays all text in 1 line.
<Text>
	{`${instructions}`}
</Text>