Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

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

Dixor
Shopify Partner
30 3 12

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
30 3 12

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
30 3 12

Up.