Skip to main content

​
Prerequisites

You’ll need your clientToken to initialize Primer Checkout. See our Client Session guide on how to create a client session and retrieve a clientToken first.

​
Install the SDK

Install the Primer SDK using npm: 
npm install @primer-io/primer-js

​
Load and Initialize

Import and initialize Primer in your application: 
import { loadPrimer } from '@primer-io/primer-js';
loadPrimer();

​
Add the Checkout Component

Create a basic checkout by adding the primer-checkout component to your page: 
<primer-checkout client-token="your-client-token"></primer-checkout>
PropertyDescription
client-tokenA token retrieved from the Client Session endpoint. This token authenticates the checkout session and contains configuration for available payment methods.

​
Verify Installation

Check that components are registered correctly in your browser console: 
// Should return a constructor function, not undefined
console.log(customElements.get('primer-checkout'));

​
Framework-Specific Setup

FrameworkAdditional Steps
React 18/19See React Integration Guide for stable reference patterns
Next.jsSee SSR Guide for client-side loading
Nuxt.jsSee SSR Guide for onMounted pattern
SvelteKitSee SSR Guide for onMount pattern
Vue.js (client-only)No additional setup needed
Vanilla JSNo additional setup needed
Server-Side RenderingIf you’re using Next.js, Nuxt, SvelteKit, or any SSR framework, you must load Primer only on the client side. The Web Components API doesn’t exist in Node.js.
// Required pattern for SSR frameworks
useEffect(() => {
  if (typeof window !== 'undefined') {
    loadPrimer();
  }
}, []);
See the SSR Guide for complete patterns.

​
Next Steps

Once installed, you have a working checkout on your website. Customize the style or layout next:

First Payment

Accept your first payment

Styling

Customize the appearance

Layout

Control component arrangement

Core Concepts

Understand the architecture