Shopify Development Hacks : Environment Variable in Checkout UI Extension

Checkout UI Extension

‍

Hello!

It has been a super frustrating couple of weeks figuring out how to include some sort of "env variables" in the Checkout UI Extension.

Luckily for you, I've gone through several blogs and posts and have finally figured out the best way to do it! The Checkout UI extension is a little different from the normal Shopify app. It runs in a sandbox on the browser and thus doesn't have access to the environment variables in the app. If you use Remix to build your extension, you could see that your codes will be compiled into one js file which would then be placed at the placeholder on the Checkout page.

So What's The Hack?

I started off using settings. (Read more here: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/configuration#settings-definition ). The thing about settings is that it's user-defined (i.e. merchant will need to set the value at the checkout editor). So if you're trying to set something like the App URL, it works, but it will be prone to issues like wrongly set URL, etc.

What works for me, is the Metafields.

So what is a Metafield? (Read more here: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/configuration#metafields))

While a Metafield is usually used to add additional property to products, customers, companies, etc, there is also an option to add a Metafield to the shop. However, this would require the Admin GraphQL API.

1. From your app (not your Checkout UI Extension), you could set the Metafield, here's a snapshot of the GraphQL mutation:

await graphql(

` mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {

   metafieldsSet(metafields: $metafields) {

     metafields {

       key

       namespace

       value

       createdAt

       updatedAt

     }

     userErrors {

       field

       message

     }

   }

 }`,

 {

   variables: {

     metafields: \[

       {

         key: "your-key",

         namespace: "your-namespace",

         ownerId: shop.id,

         type: "url",

         value: "your-value",

       },

     ],

   },

 },

);

You could call this during installation, or any point you find appropriate!

(Side note: you can use the same mutation to set the metafield for product, etc. Just make sure you supply the respective id to "ownerId" property)

2. Once this is set, in your .toml file, you would need to add the metafield. Here's an example of how it looks like. Remember to position it under [[extensions.targeting]] block:

[[extensions.targeting]]

module = "./src/your-file.jsx"

target = "purchase.checkout.reductions.render-after"

[[extensions.targeting.metafields]]

namespace = "your-namespace"

key = "your-key"

Once this is done, you are super close to getting the value!

3. In your Checkout UI Extension file, remember to:

a) Import useAppMetafields

import {useAppMetafields,} from "@shopify/ui-extensions-react/checkout";

b) Get the value:

const metaFields = useAppMetafields();

const metaField = metaFields.find((x) => x.metafield.namespace == "your-namespace" && x.metafield.key == "your-key")?.metafield;

const metaFieldValue = metaField.value;

‍

‍

That's it! Super easy and quick.

Let me know if this approach works for you (or doesn't)!

If you are a retailer in need of a return management solution, check us out at https://apps.shopify.com/liquidonate.

Till the next hack!