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.
Environment Requirements
Before diving into the implementation, ensure your environment meets these requirements:
| Requirement | Details |
|---|
| Node.js | Current LTS version recommended |
| Browsers | Modern browsers with ES2020 support (see below) |
| Not Supported | Internet Explorer 11, Classic Edge (legacy) |
Minimum Browser Versions
The SDK requires ES2020 support. Minimum supported browser versions:
| Browser | Minimum Version |
|---|
| Chrome | 80+ |
| Edge | 80+ |
| Firefox | 79+ |
| Safari | 14+ |
| iOS Safari | 14+ |
| Opera | 67+ |
| Samsung Internet | 13.0+ |
Legacy browsers like Internet Explorer 11 aren’t officially supported due to their non-standard DOM behavior and lack of support for modern Web Component features and ES2020 syntax that this SDK is built on.
Install the SDK
npm install @primer-io/primer-js
yarn add @primer-io/primer-js
pnpm add @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>
| Property | Description |
|---|
client-token | A 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
| Framework | Additional Steps |
|---|
| React 18/19 | See React Integration Guide for stable reference patterns |
| Next.js | See SSR Guide for client-side loading |
| Nuxt.js | See SSR Guide for onMounted pattern |
| SvelteKit | See SSR Guide for onMount pattern |
| Vue.js (client-only) | No additional setup needed |
| Vanilla JS | No 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 also
Once installed, you have a working checkout on your website. Customize the style or layout next:
