For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
On CHECKOUTS_CREATE webhook i need to get OTP (One-Time Password) and use it inside checkout ui.
So i have created admin api to register new metafield inside CHECKOUTS_CREATE webhook handle.
export const handleCheckoutLand = async (session, admin) => {
const shopId = await getShopId(admin);
const result = await addNewMetaField(admin, shopId);
}
const getShopId = async (admin) => {
const response = await admin.graphql.query({data: `
query {
shop {
id
}
}
`});
return response.body.data.shop.id;
}
const addNewMetaField = async (admin, shopId) => {
const addMetafieldResponse = await admin.graphql.query({
data: {
"query": `mutation ($metafields: [MetafieldsSetInput!]!) {
metafieldsSet(metafields: $metafields) {
metafields {
id
}
userErrors {
code
field
message
}
}
}`,
"variables": {
"metafields": [
{
"key": "otp_key",
"namespace": "appNameSettings",
"ownerId": shopId,
"type": "single_line_text_field",
"value": "1111111"
}
]
},
},
});
return addMetafieldResponse.body.data.metafieldsSet;
}
And then in checkout-ui extension i was able to receive it like this
export default extension("purchase.checkout.delivery-address.render-before", async (root,{ appMetafields }) => {
console.log(appMetafields)
...
The problem that the value is old. There is not enough time between we set metafield and render checkout-ui.
What is the easiest way to pass some data from CHECKOUTS_CREATE to checkout-ui?
Maybe it is possible to use this approach but i dont know how we can set checkout attributes via admin API so it will be accessible right after CHECKOUTS_CREATE webhook inside checkout ui extension.
Btw, for some reason i was not able to receive it via store front api.
function getOTP(query) {
return query(
`{
shop {
name
metafield(namespace: "appNameSettings", key: "otp_key") {
value
}
}
}`
)
.then(({ data }) => data)
.catch((err) => {
console.error(err);
return null;
});
}
Up.