Building Post Purchase Offer In Typescript

[Namish_Kapoor]

Do we have documentation to build Post Purchase Extensions In Typescript, because currently, the code added from the documentation ( Build a post-purchase product offer checkout extension ) is giving red squiggly lines

[Alan_G]

Hey @Namish_Kapoor - at the moment, we don’t have specific documentation on how to build Post Purchase extensions in Typescript (just our general tutorial here: Build a post-purchase product offer checkout extension ), but if you set up the extension using our CLI by running shopify app generate extensionor upon initialization (more info here), it should create a boilerplate typescript extension file:

There are some pre-built tips in the boilerplate notes that may help, but let me know if I can clarify anything or if you’re still encountering any blockers and I’d be happy to take a look.

[Namish_Kapoor]

Thank you so much @Alan_G, for the info. Yes, I am slowly building my muscle memory to develop a post-purchase extension in Typescript. The boilerplate gives very minimal typescript, and I believe most of the types that are highlighted by the IDE are not being exported from @shopify/post-purchase-ui-extensions. Some of my concerns are listed below

Blocker:

1. I am building an extension-only app, and there is no support or documentation for building a post-purchase extension with it. Can you please share me the docs or any reference repo if available

2. I am facing CORS errors because I am trying to fetch dynamic product data in Checkout::PostPurchase::ShouldRender phase by making a GraphQL request

   

3. As there is no backend for an extension-only app, I have created my tiny backend for signing JWTs, and once I accept the offer and click on continue, I am not redirected to the checkout again for the offer; instead, I am redirected to the Thank you page with the product already added to the cart. Is this a desired behaviour in the development stores, or am I missing something?

Also, there are a few interesting questions that I would love your valuable feedback on

1. What will happen if the user adds the upsell from the post-purchase extension to the cart, and before making a payment, he closes the tab? Will the order be incomplete in this case, or will the added upsell be excluded from the order after some time
2. If I am not choosing the post-purchase extension, Can I build custom components on the thank-you page and somehow redirect the user to the checkout with the added product to the cart or something like that, which should be treated as a separate order and not a modification to the existing one? Is there anything like that supported for any extension

I would really appreciate it if you could resolve my queries above. Thank you, and looking forward to it

[Alan_G]

Hi again @Namish_Kapoor, happy to help out with this where I can.

The post‑purchase packages should come with type definitions. A common vanilla import is import {extend, BlockStack, Text} from '@shopify/post-purchase-ui-extensions'; and you should be able to reference something like extend('Checkout::PostPurchase::ShouldRender', () => ({render: true})); There’s a bit more info here:

Post-purchase extensions API reference

That CORS issue is likely popping up since the Admin GraphQL API can’t be called directly from the extension. You should be able to use the Checkout::PostPurchase::ShouldRender functionality to pull product information rather than using the Admin API though (bit more info here). I did a bit of testing using our sample code from the tutorial and hopefully I’m looking at your code correctly there, but this is how you’d want to implement the query (you’d want to implement it as its own module (app/offer.server.ts per our example here):

export type OfferDiscount = {
  value: number;
  valueType: "percentage" | "fixed_amount";
  title: string;
};

export type OfferChange = {
  type: "add_variant";
  variantID: number;
  quantity: number;
  discount: OfferDiscount;
};

export type Offer = {
  id: number;
  title: string;
  productTitle: string;
  productImageURL: string;
  productDescription: string[];
  changes: OfferChange[];
};

const OFFERS: Offer[] = [
  {
    id: 1,
    title: "One time offer",
    productTitle: "Featured Product",
    productImageURL: "https://cdn.shopify.com/s/files/1/placeholder-image-url.jpg",
    productDescription: [
      "This product is a great addition to your purchase.",
    ],
    changes: [
      {
        type: "add_variant",
        variantID: id-here,
        quantity: 1,
        discount: {
          value: 15,
          valueType: "percentage",
          title: "15% off",
        },
      },
    ],
  },
];

export function getOffers(): Offer[] {
  return OFFERS;
}

export function getSelectedOffer(offerId: number): Offer | undefined {
  return OFFERS.find((offer) => offer.id === offerId);
}

export function getOffersForInitialVariants(initialVariantIds: number[]): Offer[] {

  const triggerVariant = 44376765038898;
  const isTriggered = initialVariantIds?.includes(triggerVariant);
  if (!isTriggered) return [];
  return OFFERS;
}



function formatCurrency(amount?: string | number | null): string {
  if (amount === undefined || amount === null) {
    return "Free";
  }

  const numeric = typeof amount === "number" ? amount : parseInt(amount, 10);
  if (!Number.isFinite(numeric) || numeric === 0) {
    return "Free";
  }

  return `$${typeof amount === "number" ? amount.toString() : amount}`;
}

Basically, what should happen here is that the extension calls your /api/offer route, which uses offer.server to build the response, and then, passes it back to ShouldRender which writes that response into extension storage for Render to use (hope this makes sense!)

For your question about what happens after an offer is accepted, buyers don’t return to checkout. Essentially, what happens is that Shopify attempts the additional charge in the background and then proceeds to the Thank you page. On a success, the upsell is just added to the existing order, and on failure, the Thank you page still loads without the upsell.

If the buyer closes the tab during post‑purchase, the original order is complete and the upsell is attempted asynchronously if they accepted it before closing the tab, resulting either in an added line item or no change, there’s no “incomplete upsell” state if that makes sense.

The existing order can’t be modified on the Thank you page either, but if you wanted you could present UI that links to a cart permalink or a new checkout to start a separate order there through Thank You page UI extensions. If you’re still running into errors though and can share the specific missing types and one failing CORS request (URL, request and response headers, and the reported origin), I’ll more than happy to see if we can pinpoint the typing and CORS issues. Hope this helps!

[Namish_Kapoor]

@Alan_G Thank you so much for the detailed explanation. I spent my whole Saturday watching your comment and building Some things are definitely cleared now.

Keeping your code in mind. I’ve made a fully working Post Purchase UI Extension without the Remix app, and here is the Repo for it GitHub - Namish-Kapoor/post-purchase. Can you please give a quick review of the code

Now the only thing that scares me is the minimal backend (not efficient as I am a core Front End Developer) that I have set up for the purpose of the app functionality, which you can give a look at here GitHub - Namish-Kapoor/nodejs-serverless-function-express

The current Problems that I am stuck on to build the post-purchase extension in an extension-only app (without the backend) rather than the remix app are:

1. I am not able to authenticate the request, whether it’s coming from Shopify in my backend. How should I effectively do this?
2. How should we fetch dynamic products from my own backend/serverless function, and how will Shopify authenticate it?
3. Is it necessary that I need to add ‘Access-Control-Allow-Origin’: ‘*’ to my offer.ts because it was throwing a CORS error without it?

”Access to fetch at ‘https://nodejs-serverless-function-express-tau-pied.vercel.app/api/offer’ from origin ‘https://cdn.shopify.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

I appreciate your help with this, and it means a great deal to me. After this is resolved, I will proceed to build an Upsell on the thank-you page. So please don’t get mad if I ping you again for concerns on that page

[Alan_G]

Hey @Namish_Kapoor , no worries, happy to help! For the CORS error, you should be able to follow the steps here to grant your extension network access which should resolve the CORS error:

Configuration

If that doesn’t resolve things though, just let me know and I can look into this further with you for sure. We have a decent guide here on how to authenticate Shopify’s request as well:

Authenticate requests between an extension and an app's backend server

I think the guide there should answer your last two questions, but essentially, your backend will authenticate with a session token, and you can verify that requests are coming from Shopify by decoding the JWT (JSON web token) that we send with our requests like this:
{header}.{payload}.{signature}

Hope this makes sense/helps out, let me know if I can clarify anything as always

[Namish_Kapoor]

@Alan_G It’s me again. Can you please look into the issue that I am facing while querying dynamic product data for a separate backend server

Store Locked Error When Fetching Storefront API on the server

I created a basic backend server to fetch product data dynamically from the store. But my GraphQL request is responding with ‘Online Store channel is locked.’ Is there any way in which I can get the product data for the development stores? app.get('/api/offer', async (_req: Request, res: Response) => { const sessionToken = _req.headers['authorization']?.split(' ')[1]; if (!sessionToken) return res.status(401).json({ error: 'No Session Token Received' }); try { const decoded = JWT.veri…

[Alan_G]

Hey @Namish_Kapoor - sure, happy to take a look! Just wanted to confirm if we can close this thread out as well?

I’ll respond in that other thread as soon as I have a chance

[Namish_Kapoor]

Yes, Sure @Alan_G I can mark the best answer to my question as resolved. Thank you so much for your support