StackBlitz Showcase Environment Requirements
StackBlitz Showcase Environment: These interactive examples run in StackBlitz, which has browser compatibility requirements. For the best showcase experience, use Chromium-based browsers (Chrome, Edge, Brave). Safari support is limited to version 16.4+ and Firefox may have reduced functionality in the StackBlitz environment.
Payment Method Limitations: Some payment methods like Google Pay and Apple Pay may not work properly in these StackBlitz showcases due to cross-origin restrictions. These are StackBlitz environment limitations only - Primer Checkout works fully in production environments.
Basic Checkout Implementation
A minimal checkout implementation using web components. Features a style toggle to demonstrate CSS variable customization in real-time.
This foundational example shows how little code is needed for a working checkout, with the flexibility to customize layouts without structural changes.
Vaulted Payment Method Component
Demonstrates saving and reusing payment methods for returning customers. Includes test cards and a complete testing environment with CVV recapture.
Try vaulting a payment method, then refresh or use "Reset Checkout Session" to see the saved payment method in action.
Custom-Styled Checkout
Explore ten unique visual themes—from minimalist to cyberpunk to kawaii—all powered by CSS variables. Switch between themes using the dropdown selector to see the styling flexibility in action.
Built with vanilla HTML and minimal JavaScript to emphasize how CSS variables alone can transform your checkout appearance. See the Styling API documentation for complete variable reference.
Custom Layout Implementation
Learn to create custom checkout layouts using slots to reorganize payment methods. Features card payments at the top, highlighted PayPal styling, and clean grid organization.
Custom Card Form Layout
Compact card form with number and CVV on the same line, plus a two-column design featuring order summary sidebar and discount codes.
More Examples Coming Soon
Our team is actively developing additional implementation examples
React Integration
A complete example of integrating Primer Checkout with React applications, including state management and component wrappers
Vue.js Integration
A complete example of integrating Primer Checkout with Vue.js applications
Angular Integration
Learn how to use Primer Checkout within an Angular application framework