| .. | ||
| locales | ||
| src | ||
| package.json | ||
| README.md | ||
| shopify.extension.toml | ||
Checkout UI Extension
Checkout UI extensions let app developers build custom functionality that merchants can install at defined targets in the checkout flow. You can learn more about checkout UI extensions in Shopify’s developer documentation.
Prerequisites
Before you start building your extension, make sure that you’ve created a development store with the checkout extensibility developer preview.
Your new Extension
Your new extension contains the following files:
README.md, the file you are reading right now.shopify.extension.toml, the configuration file for your extension. This file defines your extension’s name, where it will appear in the checkout, and other metadata.src/Checkout.jsx, the source code for your extension.locales/en.default.jsonandlocales/fr.json, which contain translations used to localized your extension.
By default, your extension is configured to target the purchase.checkout.block.render extension target. You will find the target both in your shopify.extension.toml, and in the source code of your extension. The default target allows the merchant to configure where in the checkout they want your extension to appear. If you are building an extension that is tied to existing UI element in the checkout, such as the cart lines or shipping options, you can change the extension target so that your UI extension will render in the correct location. Check out the list of all available extension targets to get some inspiration for the kinds of content you can provide with checkout UI extensions.
To build your extension, you will need to use APIs provided by Shopify that let you render content, and to read and write data in the checkout. The following resources will help you get started with checkout extensions:
- APIs by extension target
- All APIs for reading and writing checkout data
- Available components and their properties