What You Can Do
- Accept any payment methods through a single integration
- Use a prebuilt, conversion-optimized UI or customize every component
- Handle security and compliance without extra work
- Add or remove payment methods without changing your frontend code
Key Capabilities
| Capability | What It Means |
|---|---|
| Single integration | Add any payment method without writing payment-specific code |
| Prebuilt UI | Conversion-optimized components that work out of the box |
| Full customization | Control styling, layout, and behavior through configuration |
| Security built-in | PCI compliance handled for you with secure hosted inputs |
| Framework-agnostic | Works with React, Vue, vanilla JS, or any framework |
Design Principles
Works Out of the Box
Drop in<primer-checkout> and you have a working payment form. No configuration required for the default experience. Primer handles validation, error display, 3DS challenges, redirects, and loading states automatically.
Customizable Without Complexity
Change the look and feel through CSS variables. Rearrange components with slots. Add event handlers when you need custom behavior. Each layer of customization is optional—use only what you need.Stable Integration
Built on Web Components, a browser standard. Your integration won’t break when you update the SDK. Internal changes stay internal—your code interacts with a stable public API.Payment Logic Stays with Primer
You focus on the user experience. Primer handles the payment method logic, processor communication, and edge cases. Add new payment methods from the Dashboard without touching your frontend code.How It Works
- Install the Primer Checkout Web SDK
- Configure your checkout and payment methods
- Embed the checkout in your application and start accepting payments
Prerequisites
Before you start, ensure you have completed these prerequisites:- You’re ready to process payments
- Checkout is configured in your Primer Dashboard
Primer Checkout is available for Web only.For mobile integrations, see: