Shopify Post-Purchase Checkout Extension- How to render HTML product description? (React)

[kavishatalsania]

Shopify admin panel is allowing store owner to add HTML description for a product. I want to load HTML product description on a post purchase page. I am using React to create post purchase page. How can I do that?  Need some help with this please!

[Zworthkey]

@kavishatalsania 
While adding products detail ,you can see the result.

after clicking you can add the html code here.

Thank you.

[kavishatalsania]

I want to load that HTML on a post purchase page, which loads after payment page and before thank you page. 

[Zworthkey]

You mean Check out page

[kavishatalsania]

Yes

[Zworthkey]

@kavishatalsania 
Check this it may be helpful.
https://help.shopify.com/en/manual/checkout-settings

[kavishatalsania]

I am creating app which opens post purchase page using shopify post purchase extension. I want to load HTML product description into that page. I am using React framework. 

[Zworthkey]

Use Shopify tags like.

{{ product.description }}

It may be help you.

[kavishatalsania]

I am able to fetch product description. But it is not rendering properly on post purchase page. It is rendering like this. 

I don't see any component which renders HTML content - https://shopify.dev/api/checkout-extensions/components

[Zworthkey]

{{product.description | strip_html }}

Use this. i hope it will work exactly what you want.

Thank you.

[kavishatalsania]

I am using React framework  to create post purchase page not liquid code. It is giving error 'strip_html is not defined'.

[Zworthkey]

https://shopify.github.io/liquid/filters/strip_html/

check this

tags and filters

[kavishatalsania]

strip_html is for liquid templates. I am not using liquid. I am using React framework. This are the components which we can use for post purchase page: https://shopify.dev/api/checkout-extensions/components

[Zworthkey]

Check this.

https://www.npmjs.com/package/string-strip-html

[kavishatalsania]

Not working. Also I don't want to remove HTML tags. I want to render that HTML content using that HTML so it renders as expected, 

[Zworthkey]

{{ product.description | strip_html | truncate: 80 }} 

[kavishatalsania]

strip_html will not work in this scenario. I don't want to remove HTML code from a string. I need HTML content to render as expected with the styling given by user.

[BrunoSS]

You can try using dangerouslySetInnerHTML from React: 

<div dangerouslySetInnerHTML={product.descriptionHtml} />

I am not sure if you can use "div" inside the post purchase extension. If not, you can also try to use a Box component with the same dangerouslySetInnerHTML attribute.

[gilg]

Per Shopify's documentation - you can not render native HTML on post purchase. You must convert that HTML markup into Shopify approved checkout-ui react components per https://shopify.dev/api/checkout-extensions/