Checkout UI Extension - save customer metafield

Retired Boards Appdev Extensions
,
1

Hi,

I’m trying to save the customers birthday in the facts.birth_day metafield but am unable to do this using the Checkout UI API. At least when the customer is not logged in as the useCustomer() function returns undefined when the customer isn’t logged in.

Alternatively I tried to query one of my app’s API endpoints and use the Admin API to set the metafield to the customer with specified email. Currently I can’t get this to work due to authentication. It seems i can only authenticate request sent from checkout using following code:

export async function loader({ request }: LoaderFunctionArgs) {
    const { cors } = await authenticate.public.checkout(request);
    return cors(json(
        { test: 'help' }
    ))
}

But when I try:

export async function loader({ request }: LoaderFunctionArgs) {
    const { cors, admin } = await authenticate.admin(request);
    return cors(json(
        { test: 'help' }
    ))
}

The request returns a CORS error.

How can I successfully mutate this metafield and/or query app API endpoint that use the Admin API?

2

Hi OliveTrees,

Just to confirm - is this working as expected when a customer is logged in?

3

Hi Liam,

I’ve tried the following when the user is logged in.

shopify.extension.toml:

api_version = "2023-10"

[[extensions]]
type = "ui_extension"
name = "ota-birthday"
handle = "ota-birthday"

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.thank-you.block.render"

[extensions.capabilities]
api_access = true
network_access = true
block_progress = true

[[extensions.metafields]]
namespace = "facts"
key = "birth_date"

Checkout.tsx:

import {
  Banner,
  useApi,
  useTranslate,
  reactExtension,
  useMetafield,
  useAppMetafields,
  useApplyMetafieldsChange,
  useCustomer,
  BlockStack,
  TextField,
  DateField
} from '@shopify/ui-extensions-react/checkout';
import { useEffect } from 'react';

export default reactExtension(
  'purchase.thank-you.block.render',
  () => 

Unfortunately this doesn't work.

The facts.birth_date isn't returned.

Furthermore I get an error about using applyMetafieldsChange on the 'purchase.thank-you.block.render' target.

![OliveTrees_0-1702320438053.png|874x1422](upload://ydXTFW1O8nIrBGFEXFgCtA8fM1A.png)

Any assistance would be greatly appreciated.
1 Like
4

Hi Liam,

Any news?

1 Like
5

I also have a similar problem. How to use useApplyMetafieldsChange() on a customer’s metafield? I need to assign a VAT number after purchase. I tested it on the development store with all accesses and I’m logged in.

I can get value if I provide it in CMS with useAppMetafields, but I can’t overwrite it with useApplyMetafieldsChange.