New Shopify Certification now available: Liquid Storefronts for Theme Developers

Pass data from app on CHECKOUTS_CREATE webhook in to checkout-ui extension

Dixor
Shopify Partner
29 3 9

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.

Replies 2 (2)
Dixor
Shopify Partner
29 3 9

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;
	});
}

 

 

Dixor
Shopify Partner
29 3 9

Up.