Embedded Components

The fastest way to accept payments is the Checkout component - a drop-in form with cards, Apple Pay, 3DS, and a built-in submit button in one element. Need more control? Card, Split Card, and Apple Pay components let you build a fully custom UI.

Checkout Recommended
Drop-in checkout form with card input, Apple Pay, built-in submit button, and 3DS - all in one element. The lowest-effort path to a fully functional, PCI-compliant payment form.
Get started
Card
Single card input field. Bring your own submit button and form layout.
View docs
Split Card
Separate fields for card number, expiry, and CVC - full layout control.
View docs
Apple Pay
Native Apple Pay button. One-tap checkout for Safari and compatible browsers.
View docs

Choosing the Right Component

Checkout Card Split Card Apple Pay
Integration effort Low - one element Low - one element + submit Moderate - 3 elements + submit Low - one element
Code required Minimal - mount & done Some - custom submit logic More - mount 3 fields + submit Minimal - mount & done
Layout control Limited - single form block Moderate - your own form around it Full - place each field anywhere Button only
Built-in submit button Yes (customisable) No - use your own No - use your own Yes (Apple Pay button)
Payment methods Cards + Apple Pay Cards only Cards only Apple Pay only
Submit method checkout.submitPayment() card.submitPayment() teya.elements.submitPayment() Automatic via Apple Pay sheet
DCC support Yes Yes * No No
Best for Most integrations - start here Simple card form with custom layout Full design control over card fields One-tap Apple Pay checkout

Ready to integrate?

Follow the Checkout quickstart to accept your first payment in minutes.

Get started with Checkout

Related