Checkout UI Extension - save customer metafield

Checkout UI Extension - save customer metafield

OliveTrees
Shopify Partner
3 0 2

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?

 

Replies 4 (4)

Liam
Shopify Staff
2873 312 821

Hi OliveTrees,

 

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

OliveTrees
Shopify Partner
3 0 2

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',
  () => <Extension />,
);

function Extension() {
  const translate = useTranslate();
  const { extension, buyerIdentity, query, appMetafields, metafields, sessionToken } = useApi();

  // Requires access to protected customer data and the user to be logged in.
  console.log(buyerIdentity);

  // Define the metafield namespace and key
  const metafieldNamespace = "facts";
  const metafieldKey = "birth_date";

  // Get a reference to the metafield
  const birthday = useMetafield({
    namespace: metafieldNamespace,
    key: metafieldKey,
  });
  console.log('bd', birthday);

  const test = useAppMetafields({
    type: 'customer',
    namespace: 'facts',
    key: 'birth_date'
  });
  console.log('bd1', test);

  // Set a function to handle updating a metafield
  const applyMetafieldsChange = useApplyMetafieldsChange();

  return (
    <BlockStack>
        <DateField label='Birthday' onChange={(value) => {
          // Apply the change to the metafield
          applyMetafieldsChange({
            type: "updateMetafield",
            namespace: metafieldNamespace,
            key: metafieldKey,
            valueType: "string",
            value,
          });
        }}
        value={birthday?.value.toString()}/>
    </BlockStack>
  );
}

 

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

 

Any assistance would be greatly appreciated.

OliveTrees
Shopify Partner
3 0 2

Hi Liam,

Any news?

lynth
Shopify Partner
82 3 7

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.

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!