Building Shopify app extensions 

1import { Provider } from "@gadgetinc/react";
2import { api } from "./api";
3
4export default reactExtension(TARGET, () => (
5  <Provider api={api}>
6    <App />
7  </Provider>
8));

1import { useCallback, useState } from "react";
2import { reactExtension, useApi, AdminAction, BlockStack, Button, Text, NumberField } from "@shopify/ui-extensions-react/admin";
3// import app API client
4import { api } from "./api";
5import { Provider, useAction } from "@gadgetinc/react";
6
7// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
8const TARGET = "admin.product-details.action.render";
9
10// set up the Provider component so React hooks can be used
11export default reactExtension(TARGET, () => (
12  <Provider api={api}>
13    <App />
14  </Provider>
15));
16
17function App() {
18  // The useApi hook provides access to several useful APIs like i18n, close, and data.
19  const {
20    extension: { target },
21    i18n,
22    close,
23    data,
24  } = useApi(TARGET);
25
26  const [wordCount, setWordCount] = useState("100");
27
28  // custom action in Gadget that updates the product description
29  // using OpenAI to generate a description based on the word count and product images
30  const [_, updateDescription] = useAction(api.shopifyProduct.updateDescription);
31
32  const update = useCallback(async () => {
33    // get current product id from data
34    // remove the shopifyProduct gid prefix from the id
35    const productId = data.selected[0].id.split("/").pop();
36    // fire request to update the product description in Gadget
37    await updateDescription({
38      id: productId,
39      wordCount,
40    });
41  });
42
43  // The AdminAction component provides an API for setting the title and actions of the Action extension wrapper.
44  return (
45    <AdminAction
46      primaryAction={
47        <Button
48          onPress={() => {
49            update();
50            close();
51          }}
52        >
53          {i18n.translate("updateDescription")}
54        </Button>
55      }
56      secondaryAction={
57        <Button
58          onPress={() => {
59            close();
60          }}
61        >
62          {i18n.translate("close")}
63        </Button>
64      }
65      loading={fetching}
66    >
67      <BlockStack gap="large">
68        <Text fontWeight="bold">{i18n.translate("welcome", { target })}</Text>
69        <NumberField label="Select a word count" value={wordCount} onChange={setWordCount} />
70      </BlockStack>
71    </AdminAction>
72  );
73}

1import { Banner, reactExtension } from "@shopify/ui-extensions-react/checkout";
2import { Provider, useGlobalAction } from "@gadgetinc/react";
3// import your app API client
4import { api } from "../api";
5
6// set up the Provider component so React hooks can be used
7export default reactExtension("purchase.checkout.block.render", () => (
8  <Provider api={api}>
9    <Extension />
10  </Provider>
11));
12
13function Extension() {
14  // use hooks to call your API
15  // in this case, a global action
16  const [{ data, error, fetching }, refresh] = useGlobalAction(api.myCustomGlobalAction);
17
18  if (fetching) {
19    return <Banner>Loading...</Banner>;
20  }
21
22  if (error) {
23    return <Banner>Error loading. Please try again.</Banner>;
24  }
25
26  return <Banner>{data.value}</Banner>;
27}

1import { reactExtension, useApi } from "@shopify/ui-extensions-react/customer-account";
2import { Provider, useGadget } from "@gadgetinc/shopify-extensions/react";
3import { useFindMany } from "@gadgetinc/react";
4import { Client } from "@gadget-client/example-app";
5
6// initialize a new Client for your Gadget API
7const apiClient = new Client();
8
9// the Provider is set up in the reactExtension() initialization function
10export default reactExtension("your.extension.target", () => <GadgetUIExtension />);
11
12// component to set up the Provider with the sessionToken from Shopify
13function GadgetUIExtension() {
14const { sessionToken } = useApi();
15
16return (
17
18<Provider api={apiClient} sessionToken={sessionToken}>
19  <MyExtension />
20</Provider>
21); }
22
23function MyExtension() {
24// get the 'api' client and a 'ready' boolean from the useGadget hook
25const { api, ready } = useGadget<Client>();
26
27const [{ data, fetching, error }] = useFindMany(api.customModel, {
28// use 'ready' to pause hooks until the API client is ready to make authenticated requests
29pause: !ready,
30});
31
32// the rest of your extension component...
33}

1import { Banner, reactExtension, useApi } from "@shopify/ui-extensions-react/checkout";
2import { useState, useEffect } from "react";
3
4export default reactExtension("purchase.checkout.block.render", () => <Extension />);
5
6function Extension() {
7  // get the session token from the useApi hook
8  const { sessionToken } = useApi();
9  const [productData, setProductData] = useState(null);
10
11  useEffect(() => {
12    // Specify the GraphQL endpoint
13    const url = "https://my-extension-app--development.gadget.dev/api/graphql";
14
15    // Create a GraphQL query
16    const query = `
17      query GetOneShopifyProduct($id: GadgetID!) {
18        shopifyProduct(id: $id) {
19          title
20        }
21      }
22    `;
23
24    // get the session token
25    async function getToken() {
26      const token = await sessionToken.get();
27      return token;
28    }
29
30    // use fetch to make a POST request to the GraphQL endpoint
31    getToken().then((token) => {
32      fetch(url, {
33        method: "POST",
34        headers: {
35          "Content-Type": "application/json",
36          Accept: "application/json",
37          // pass the session token using the Authorization header
38          Authorization: `ShopifySessionToken ${token}`,
39        },
40        body: JSON.stringify({ query: query }),
41      })
42        .then((response) => response.json())
43        .then((jsonData) => {
44          // handle the returned data
45          setProductData(jsonData.data.product);
46        })
47        .catch((error) => console.error("Error:", error));
48    });
49  }, [sessionToken]);
50
51  return <Banner>{productData.title}</Banner>;
52}

1/**
2 * Extend Shopify Checkout with a custom Post Purchase user experience.
3 * This template provides two extension points:
4 *
5 *  1. ShouldRender - Called first, during the checkout process, when the
6 *     payment page loads.
7 *  2. Render - If requested by `ShouldRender`, will be rendered after checkout
8 *     completes
9 */
10// other imports such as React state hooks and extension components are omitted for brevity
11import React from "react";
12import { extend, render } from "@shopify/post-purchase-ui-extensions-react";
13// your app API client
14import { api } from "./api";
15
16/**
17 * Entry point for the `ShouldRender` Extension Point.
18 *
19 * Returns a value indicating whether or not to render a PostPurchase step, and
20 * optionally allows data to be stored on the client for use in the `Render`
21 * extension point.
22 */
23extend("Checkout::PostPurchase::ShouldRender", async ({ inputData, storage }) => {
24  // get the variant ids of the products in the initial purchase
25  const productVariantIds = inputData.initialPurchase.lineItems.map((lineItem) => lineItem.product.variant.id);
26
27  // make request against POST-offer route in Gadget
28  const response = await api.fetch("/offer", {
29    method: "POST",
30    headers: {
31      "Content-Type": "application/json",
32      Authorization: `Bearer ${inputData.token}`,
33    },
34    body: JSON.stringify({
35      referenceId: inputData.initialPurchase.referenceId,
36      productVariantIds,
37    }),
38  });
39
40  // get response body from route
41  const jsonResp = await response.json();
42  // save offers to extension storage
43  await storage.update({ offers: jsonResp.offers });
44
45  // For local development, always show the post-purchase page
46  return { render: true };
47});
48
49render("Checkout::PostPurchase::Render", () => <App />);
50
51export function App() {
52  // the rest of the post-purchase extension component
53  // determine what is actually rendered in this component
54}

1import { RouteHandler } from "gadget-server";
2import jwt from "jsonwebtoken";
3import { getOffers } from "../utils/offerUtils";
4
5const route: RouteHandler<{
6  Body: {
7    referenceId: string;
8    productVariantIds: string[];
9  };
10}> = async ({ request, reply, api, logger, connections }) => {
11  let token = request.headers?.Authorization as string;
12  if (token?.startsWith("Bearer ")) {
13    token = token.slice(7);
14  } else {
15    // if no bearer token is present, return 401 error
16    await reply.code(401).send();
17  }
18
19  // use SHOPIFY_API_SECRET (from Partners app) as an environment variable to decode the token
20  const decodedToken = jwt.verify(token, process.env["SHOPIFY_CLIENT_SECRET"]);
21
22  // get the referenceId from the decoded token
23  const decodedReferenceId = decodedToken.input_data.initialPurchase.referenceId;
24
25  const { referenceId, productVariantIds } = request.body;
26
27  if (decodedReferenceId !== referenceId) {
28    // return error if incoming jwt is not valid
29    await reply.code(401).send();
30  }
31
32  // fetch custom offers
33  const offers = await getOffers({ api, logger, connections, productVariantIds });
34
35  // reply with the offers
36  await reply.headers({ "Content-type": "application/json" }).send({ offers });
37};
38
39export default route;

1import { RouteHandler } from "gadget-server";
2import { v4 as uuidv4 } from "uuid";
3import jwt from "jsonwebtoken";
4
5const route: RouteHandler<{
6  Body: {
7    referenceId: string;
8    changes: string;
9  };
10}> = async ({ request, reply, api, logger, connections }) => {
11  // get token from headers
12  let token = request.headers?.authorization as string;
13  if (token?.startsWith("Bearer ")) {
14    token = token.slice(7);
15  } else {
16    // if no bearer token is present, return 401 error
17    await reply.code(401).send();
18  }
19
20  // use SHOPIFY_API_SECRET (from Partners app) as an environment variable to decode the token
21  const decodedToken = jwt.verify(token, process.env["SHOPIFY_CLIENT_SECRET"]);
22  const decodedReferenceId = decodedToken.input_data.initialPurchase.referenceId;
23
24  const { referenceId, changes } = request.body;
25  // compare passed in referenceId with decoded referenceId
26  if (decodedReferenceId !== referenceId) {
27    // return error if incoming jwt is not valid
28    await reply.code(401).send();
29  }
30
31  // create the payload for updating the order
32  const payload = {
33    iss: process.env["SHOPIFY_CLIENT_KEY"],
34    jti: uuidv4(),
35    iat: Date.now(),
36    sub: referenceId,
37    changes,
38  };
39
40  // sign the token and return back to the extension
41  const responseToken = jwt.sign(payload, process.env["SHOPIFY_CLIENT_SECRET"]);
42  await reply.send({ token: responseToken });
43};
44
45export default route;

1document.addEventListener("DOMContentLoaded", function () {
2  // initialize an API client object
3  const myExtensionAPI = new Gadget();
4
5  const myButton = document.getElementById("my-button");
6  myButton.addEventListener("click", async () => {
7    // make a request to your app's API
8    const response = await myExtensionAPI.myDataModel.findOne("1");
9    console.log(response);
10  });
11});