How to connect to an external API from the new Checkout extensibility?

Solved

How to connect to an external API from the new Checkout extensibility?

ColombiaDev
Shopify Partner
39 3 3

How to connect to an external API from the new Checkout extensibility?

Front-end Developer | Shopify | Liquid | Ruby | Javascript | API Rest | SEO | Optimización
Accepted Solution (1)

ocastx
Shopify Partner
31 6 11

This is an accepted solution.

Hi ColombiaDev,

 

to perform an external network call you would need to allow external network access in your Checkout UI extension as described here.

Please note, that there is an alternative way to avoid using using external APIs at all, by retrieving data from metafields. From the linked docs: 

"Instead of fetching data with an external network call, consider retrieving the data from a metafield. Your app may be able to use the Admin API to write metafields on the shop, product, or customer ahead of checkout."

 

Hope this helps!

View solution in original post

Replies 2 (2)

ocastx
Shopify Partner
31 6 11

This is an accepted solution.

Hi ColombiaDev,

 

to perform an external network call you would need to allow external network access in your Checkout UI extension as described here.

Please note, that there is an alternative way to avoid using using external APIs at all, by retrieving data from metafields. From the linked docs: 

"Instead of fetching data with an external network call, consider retrieving the data from a metafield. Your app may be able to use the Admin API to write metafields on the shop, product, or customer ahead of checkout."

 

Hope this helps!

ColombiaDev
Shopify Partner
39 3 3

Hello Ocastx.

I could realize that the "Network access" step is important, otherwise it would not work.

It is possible to use React to bring an external API to the Shopify checkout.

And very good idea to do it as much as possible with metafields. It is much easier.

Thanks for replying.



Front-end Developer | Shopify | Liquid | Ruby | Javascript | API Rest | SEO | Optimización