@primer-io/primer-js 0.0.1 → 0.0.3

package/LICENSE.md

@@ -0,0 +1,28 @@
+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:
+
+- Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+- 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.
+
+- 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.
+
+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.

package/README.md

@@ -0,0 +1,146 @@
+# Primer Composable Checkout
+
+![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
+
+## Installation
+
+```bash
+npm install @primer-io/primer-js
+```
+
+Then import and initialize Primer in your application:
+
+```javascript
+import { loadPrimer } from '@primer-io/primer-js';
+loadPrimer();
+```
+
+## Quick Start
+
+Import the css styles:
+
+```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"
+/>
+```
+
+Render the checkout:
+
+```html
+<primer-checkout client-token="your-client-token"></primer-checkout>
+```
+
+## Basic Usage
+
+### Complete Checkout Form
+
+```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>
+```
+
+### Custom Card Form Layout
+
+```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>
+```
+
+## Event Handling
+
+```javascript
+const checkout = document.querySelector('primer-checkout');
+
+// Listen for SDK state changes
+checkout.addEventListener('primer-state-changed', (event) => {
+  const { isProcessing, isSuccessful, error } = event.detail;
+  // Handle state changes
+});
+
+// Listen for available payment methods
+checkout.addEventListener('primer-payment-methods-updated', (event) => {
+  const paymentMethods = event.detail.toArray();
+  // Handle payment methods list
+});
+```
+
+## Theming
+
+Primer Composable Checkout supports both light and dark themes and can be easily customized to match your brand:
+
+```css
+:root {
+  /* Brand colors */
+  --primer-color-brand: #663399; /* Purple brand color */
+
+  /* Typography */
+  --primer-typography-brand: 'Roboto', sans-serif;
+
+  /* Border radius */
+  --primer-radius-base: 8px;
+
+  /* Spacing */
+  --primer-space-base: 8px;
+}
+```
+
+## Documentation
+
+For comprehensive documentation, guides, and API reference, please visit:
+
+[Primer Composable Checkout Documentation](https://composable-checkout.vercel.app)
+
+## Supported Browsers
+
+- Chrome
+- Firefox
+- Safari
+- Edge
+
+## License
+
+Copyright © Primer API Ltd. All rights reserved.