Primer Checkout | Primer Checkout Docs

Why Choose Primer Checkout?

Powerful flexibility with effortless integration

Web Component Power

Built on modern, framework-agnostic web standards for maximum flexibility and performance across any tech stack

Powerful Layout Customization

Create unique checkout experiences with flexible layout options that adapt to your specific business needs and customer journey

Explore layout options →

Scalable Styling API

Maintain brand consistency with our comprehensive styling variables that make design changes simple, scalable, and maintainable

View styling variables →

Best of Both Worlds

With Primer Checkout, we want you to offer your customers the most tailored checkout experience. No more choosing between the simplicity of Drop-in and the flexibility of Headless—Primer Checkout combines the best of both worlds, giving you maximum customization with minimal configuration effort.

Get Started

Effortless Styling

To meet all your UI needs, we've introduced Style Variables—a set of variables that let you precisely and effortlessly configure the appearance of your checkout to match your brand.

Explore Style Variables

Simple Implementation

Add a few lines of code and you're ready to go

<primer-checkout clientToken="your-client-token">
  <!-- Customizable checkout experience -->
  <primer-main slot="main">
    <div slot="payments">
      <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
      <primer-payment-method type="APPLE_PAY"></primer-payment-method>
      <primer-payment-method type="GOOGLE_PAY"></primer-payment-method>
    </div>
  </primer-main>
</primer-checkout>

View Documentation

See It In Action

Visit our Showcase to explore practical examples of Primer Checkout implementations. Interact with live demos and see how different customization options affect the checkout experience.

View Interactive Examples