What Elements are
Kustom Elements are web components for pages you already own — payment and delivery method displays and express buttons — and when to use them over a checkout.
Elements are small pieces of Kustom that you place into pages you already own, such as a product page, a cart or a mini cart. Each one is a single HTML tag. They show up before a checkout exists, so they aren’t a checkout and don’t replace one. They improve the journey leading up to it, and one of them, express buttons, can take the whole payment on the spot.
The three elements
Section titled “The three elements”| Element | Tag | What the customer sees |
|---|---|---|
| Payment method display | <kustom-payment-method-display> | The payment methods you offer in their market, filtered to the ones configured on your account |
| Delivery method display | <kustom-delivery-method-display> | The carriers customers have actually chosen in your recent shipping sessions |
| Express buttons | <kustom-express-buttons> | Apple Pay, Google Pay and PayPal buttons that pay for the product or cart without opening the full checkout |
The two displays are information. They tell a customer how they’ll be able to pay and how the order can reach them, which answers those questions before checkout rather than during it. Express buttons are a way to buy: the wallet sheet collects the address and the payment, Kustom prices shipping and completes the order, and you send the customer to your confirmation page.
How they work
Section titled “How they work”Every element runs on one installation script, which you copy from the Portal and place high
in your page <head>. The script carries a public API key bound to one Merchant ID in one
environment. It registers the tags and connects them to your account, so once it’s on a page
an element is just its tag. Elements only render on domains you’ve registered in the Portal,
and the script must load from the Kustom CDN. Re-hosting or proxying it breaks the
integration.
The displays are declarative. You set a locale and, if you want, include and exclude
lists of method identifiers, and the element does the
rest.
Express buttons need one more step. A JavaScript call tells them which order they’re paying for, and choosing who creates that order is most of the integration. Every express purchase still completes an ordinary Kustom Checkout order, so the push, acknowledge and capture work the same as for any order you create.
What each one depends on
Section titled “What each one depends on”- Payment method display lists only the methods configured on your account.
- Delivery method display needs the Shipping Assistant on your Merchant ID. In Playground it shows a short static list of carriers instead.
- Express buttons need their own setup in the Portal (a push URL and a confirmation URL) and the Shipping Assistant. The PayPal button also needs a connected PayPal account.
Elements or a checkout
Section titled “Elements or a checkout”Reach for Elements when the pages are yours and you want Kustom on them: showing payment options on a product page, or letting a customer buy in one tap from the cart. When you need the full purchase, with the customer’s details, delivery choice and every payment method, that’s an integration model. You can use both: Elements on the way in, the embedded checkout at the end. Integration models covers the checkout side.
If your store runs on a platform, check its plugin first. It may place these elements for you.
Related
Section titled “Related”- Adding Elements to your site — install the script and register your domains
- Add express buttons — wallet buttons and who creates the order
- Element catalogue — every tag, its attributes and its locales
- Element method identifiers — the values
includeandexcludeaccept
This page is also available as Markdown — append .md to its URL — and is indexed in llms.txt.