Shopify Question posted in
The Shopify help center can be found here.

How to add a metafield/attribute to a Shopify order before it's submitted with checkout ui extensions

I need to add the customizations made through checkout ui extensions as a metafield/attribute on the order, so it is populated under additional details. This is my current customization. Is it possible to make it a metafield/attribute on the checkout order?

import React, { useState } from 'react';
import {
  useExtensionApi,
  render,
  TextField,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [vatNumber, setVatNumber] = useState('');

  const handleVatNumberChange = (val) => {
    setVatNumber(val)
  }

  return (
    <>
      <TextField
        label="VAT Number (Optional)"
        name="vat_number"
        value={vatNumber}
        onChange={(val) => handleVatNumberChange(val)}
      />
    </>
  );
}
Tags:

2

Answers


  1. 0

    You would not capture a VAT number and store it as a metafield. Instead, orders have cart notes and cart attributes. Typically you use those. Further, you probably don’t want to capture that in the checkout, for more than couple of reasons, so you grab it at the cart level before checkout. But if you did insist on capturing that data in the checkout itself, the thing to learn would be how to add the VAT number as a cart attribute. That being said, maybe the checkout API has some endpoint that is useful for this. You’ll have do a careful audit and discovery process.

    Login or Signup to reply.
  2. 0

    For anyone stumbling on this, using the https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useapplyattributechange would add it to the cart attributes

    const handleVatNumberChange = (val) => {
setVatNumber(val)
// applyAttributeChange here, note that it overrites so you might want to fetch it first if it's important for you

    }

    and on order placement, it would be stored on the Shopify Order customAttributes property

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search