@primer-io/primer-js 0.3.12 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @primer-io/primer-js
 
+## 0.5.0
+
+### Minor Changes
+
+- 791a212: BLIK support
+
+## 0.4.0
+
+### Minor Changes
+
+- 6fa6c1c: Billing address released, SDK core is default now.
+
+### Patch Changes
+
+- c72066e: billing address for primer-js
+
 ## 0.3.12
 
 ### Patch Changes

package/README.md

@@ -1,19 +1,8 @@
-# Primer Composable Checkout
+# Primer Checkout SDK
 
 ![Primer Logo](https://goat-assets.production.core.primer.io/brand/icon/primer.svg)
 
-> **BETA NOTICE**: Primer Composable Checkout is currently in beta. While the core architecture and design philosophy will remain stable, some aspects may evolve based on feedback, including variable naming, component naming, and API refinements. By using this beta version, you'll have the opportunity to influence its development before general release.
-
-Primer Composable Checkout is a web component-based SDK that enables you to build customizable, PCI-compliant checkout experiences quickly and easily. With Primer's flexible component architecture, you can create branded payment experiences that work consistently across all modern browsers.
-
-## Features
-
-- 🧩 **Component-Based Architecture**: Modular web components built on modern web standards
-- 🎨 **Highly Customizable**: Extensive theming options through CSS custom properties
-- 🔒 **Secure by Design**: PCI-compliant payment flows with secure form handling
-- 📱 **Responsive**: Works seamlessly across devices and screen sizes
-- 🌐 **Framework Agnostic**: Integrates with any JavaScript environment or framework
-- 🔄 **Multiple Payment Methods**: Support for cards, digital wallets, and alternative payment methods
+A modern web component-based SDK for integrating Primer's Checkout into your web application. Support for cards, digital wallets, and 100+ payment methods with minimal code.
 
 ## Installation
 
@@ -21,126 +10,119 @@ Primer Composable Checkout is a web component-based SDK that enables you to buil
 npm install @primer-io/primer-js
 ```
 
-Then import and initialize Primer in your application:
+## Quick Start
 
 ```javascript
 import { loadPrimer } from '@primer-io/primer-js';
-loadPrimer();
-```
 
-## Quick Start
-
-Import the css styles:
+// Load the SDK
+loadPrimer();
 
-```html
-<link
-  rel="stylesheet"
-  href="https://sdk.primer.io/web/primer-js/v0-latest/styles.css"
-/>
-<!-- The dark theme import below is optional -->
-<link
-  rel="stylesheet"
-  href="https://sdk.primer.io/web/primer-js/v0-latest/dark.css"
-/>
+// Add checkout to your page
+// <primer-checkout client-token="your-client-token"></primer-checkout>
 ```
 
-Render the checkout:
-
 ```html
 <primer-checkout client-token="your-client-token"></primer-checkout>
 ```
 
-## Basic Usage
+That's it! The SDK handles payment method rendering, validation, and payment processing.
 
-### Complete Checkout Form
+## Prerequisites
 
-```html
-<primer-checkout client-token="your-client-token">
-  <primer-main slot="main">
-    <div slot="payments">
-      <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
-      <primer-payment-method type="PAYPAL"></primer-payment-method>
-      <primer-payment-method type="GOOGLE_PAY"></primer-payment-method>
-    </div>
-  </primer-main>
-</primer-checkout>
-```
+Before using the SDK, you'll need:
 
-### Custom Card Form Layout
+1. A Primer account with [Universal Checkout configuration](https://primer.io/docs/payments/universal-checkout/configure-universal-checkout-without-code)
+2. A client token from the [Client Session API](https://primer.io/docs/api/api-reference/client-session-api/create-client-side-token)
 
-```html
-<primer-checkout client-token="your-client-token">
-  <primer-main slot="main">
-    <div slot="payments">
-      <primer-payment-method type="PAYMENT_CARD">
-        <primer-card-form>
-          <div slot="card-form-content">
-            <primer-input-card-number></primer-input-card-number>
-            <div style="display: flex; gap: 8px;">
-              <primer-input-card-expiry></primer-input-card-expiry>
-              <primer-input-cvv></primer-input-cvv>
-            </div>
-            <primer-input-card-holder-name></primer-input-card-holder-name>
-            <primer-button buttonType="submit">Pay Now</primer-button>
-          </div>
-        </primer-card-form>
-      </primer-payment-method>
-    </div>
-  </primer-main>
-</primer-checkout>
-```
+## Browser Support
 
-## Event Handling
+Works with all modern browsers (Chrome, Firefox, Safari, Edge). Internet Explorer 11 and legacy Edge are not supported.
 
-```javascript
-const checkout = document.querySelector('primer-checkout');
+## Key Features
 
-// Listen for SDK state changes
-checkout.addEventListener('primer-state-changed', (event) => {
-  const { isProcessing, isSuccessful, error } = event.detail;
-  // Handle state changes
-});
+- **Universal Checkout**: Support for 100+ payment methods with a single integration
+- **Web Components**: Works with React, Vue, Svelte, Next.js, and vanilla JavaScript
+- **Customizable**: Full styling control via CSS variables
+- **Event-Driven**: Listen to payment lifecycle events
+- **TypeScript**: Full type definitions included
+- **Vault Mode**: Save payment methods for future use
 
-// Listen for available payment methods
-checkout.addEventListener('primer-payment-methods-updated', (event) => {
-  const paymentMethods = event.detail.toArray();
-  // Handle payment methods list
-});
-```
+## Documentation
+
+📚 [Web Components Documentation](https://web-components.primer.io)
+
+### Quick Links
+
+- [Getting Started Guide](https://web-components.primer.io/documentation/getting-started)
+- [SDK Options Reference](https://web-components.primer.io/sdk-reference/sdk-options-reference)
+- [Events Guide](https://web-components.primer.io/guides/events-guide)
+- [React Integration Guide](https://web-components.primer.io/guides/react-guide)
+- [Styling API Documentation](https://web-components.primer.io/sdk-reference/styling-api-docs)
+
+## Examples
+
+See working examples with different frameworks and use cases:
 
-## Theming
+🔗 [GitHub Examples Repository](https://github.com/primer-io/examples)
 
-Primer Composable Checkout supports both light and dark themes and can be easily customized to match your brand:
+### Available Examples
 
-```css
-:root {
-  /* Brand colors */
-  --primer-color-brand: #663399; /* Purple brand color */
+- Vanilla JavaScript + TypeScript
+- React with custom layouts
+- Theme customization
+- Vaulted payments
+- Server-side rendering
 
-  /* Typography */
-  --primer-typography-brand: 'Roboto', sans-serif;
+## TypeScript Support
 
-  /* Border radius */
-  --primer-radius-base: 8px;
+TypeScript definitions are included. For JSX/TSX projects, add type declarations:
 
-  /* Spacing */
-  --primer-space-base: 8px;
+```typescript
+import type { CheckoutElement } from '@primer-io/primer-js';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'primer-checkout': CheckoutElement;
+    }
+  }
 }
 ```
 
-## Documentation
+## Event Handling
 
-For comprehensive documentation, guides, and API reference, please visit:
+Listen to payment lifecycle events:
 
-[Primer Composable Checkout Documentation](https://composable-checkout.vercel.app)
+```javascript
+const checkout = document.querySelector('primer-checkout');
 
-## Supported Browsers
+checkout.addEventListener('primer:ready', () => {
+  console.log('Checkout ready');
+});
+
+checkout.addEventListener('primer:state-change', (event) => {
+  const { isProcessing, isSuccessful, error } = event.detail;
+  // Handle payment state changes
+});
+```
 
-- Chrome
-- Firefox
-- Safari
-- Edge
+## Support
+
+- **Documentation**: [Web Components Documentation](https://web-components.primer.io)
+- **API Reference**: [Primer API Docs](https://primer.io/docs/api)
+- **Support**: Contact your Primer account manager
 
 ## License
 
-Copyright © Primer API Ltd. All rights reserved.
+**BSD 3-Clause License**
+
+Copyright (c) 2021 Primer API Ltd. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+> **Disclaimer**: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.