primer-web-components
CommunityCreate checkout UIs with Primer web components.
System Documentation
What problem does it solve?
Primer Web Components provide a framework-agnostic set of UI elements to build checkout and payment flows across frameworks. They simplify embedding a consistent checkout experience without locking to a specific frontend framework, enabling reuse of components like primer-checkout, primer-card-form, and primer-payment-method across React, Next.js, Vue, Svelte, or vanilla JavaScript projects.
Core Features & Use Cases
- Framework-agnostic web components for checkout and payment experiences using Primer's components.
- Declarative and SSR-friendly; supports slots and custom events for flexible integrations.
- Example use cases: embedding a full checkout in a React page, integrating a payment method UI in Next.js, or building a vanilla JS checkout page with accessible components.
Quick Start
Install the Primer package: npm install @primer-io/primer-js Load Primer and initialize: import { loadPrimer } from '@primer-io/primer-js'; loadPrimer(); Embed in your app: <primer-checkout client-token="YOUR_TOKEN"></primer-checkout> For React/Vue/Svelte, pass a stable options object to avoid re-initialization and ensure seamless user experience.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: primer-web-components Download link: https://github.com/RipKDR/Steps-to-recovery/archive/main.zip#primer-web-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.