Render a custom field in Shopify checkout after the contact form using the purchase.checkout.contact.render-after static target

In-depth guide

Steps

1. In shopify.extension.toml, add a targeting block with target = 'purchase.checkout.contact.render-after' under [[extensions.targeting]] for a static placement after the contact information form
2. Use useApplyAttributeChange() from @shopify/ui-extensions-react/checkout to write custom key-value data to the order attributes when the customer fills in a custom field
3. Render a TextField component bound to a local state variable; on change call applyAttributeChange({ key: 'custom_field', value: inputValue, type: 'updateAttribute' })
4. Use useBuyerJourneyIntercept() to validate the field before checkout proceeds — return { behavior: 'block', reason: 'Field required', perform: ... } if the field is empty
5. Test the extension locally with shopify app dev and visit the checkout URL in a test store; extension console output appears in the terminal
6. Read order attributes after purchase via the Shopify Admin API on the order object's note_attributes field or as metafields depending on your data model