Make a request to your app server to fetch the data in shopify checkout extension

Shopify Discussion
1

I am working on shopify checkout extension and i want to display a product that is realted to the bought product in my extension how am i supposed to make call for it
What i am currently doing is:

async function fetchPostPurchaseData() {
// This is where you would make a request to your app server to fetch the data

const [name, setName] = React.useState(‘’);

axios
.get(
‘https://developmentstoreystsol.myshopify.com/admin/api/2021-07/products.json’
)
.then((response) => {
setName(response.products[0].title);
});

return {
productTitle: ‘Random’,

productImageURL:
‘https://cdn.shopify.com/s/files/1/0589/5818/4636/products/badoutput.png?v=1630915332’,
};
}

but it displays nothing

2

Hey MajoMFR, have you reviewed the code for Shopifys Product Reviews Sample App? Specifically their included post purchase checkout extension? Here’s a direct link the the file I think will be of interest to you: https://github.com/Shopify/product-reviews-sample-app/blob/main/checkout-extension/src/index.js

Specifically I’d review the ‘Checkout::PostPurchase::ShouldRender’ function and getProduct function.

3

Also - it looks like you’re calling the Admin API from the client. I believe this is a security vulnerability since you don’t want to expose your access token to clients.

If you’re just getting unauthenticated product data you might be able to use the Rest Ajax API instead of the Admin API - https://shopify.dev/api/ajax/reference/product

Or do as the Product Reviews Sample App does and use a App Proxy. See file https://github.com/Shopify/product-reviews-sample-app/blob/main/server/server.js and look at the router.post(“/api/post-purchase/get-product”) endpoint specifically.

When reviewing the Product Reviews Sample App documentation - be sure not to overlook their Getting Started instructions.