npm - recur-tw - Versions diffs - 0.0.4-beta.4 → 0.1.0 - Mend

recur-tw 0.0.4-beta.4 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -8,6 +8,7 @@ Taiwan-specific subscription checkout SDK with embedded payment forms powered by
 ## 🚀 Features
+- ✅ **Hosted Checkout** - Zero-backend integration with `<recur-checkout>` Web Component
 - ✅ **React SDK** - Full React integration with hooks (`usePlans`, `useRecur`)
 - ✅ **Vanilla JS** - Use with plain HTML/JavaScript (no framework required)
 - ✅ **Embedded Checkout** - Native payment forms with PAYUNi credit card fields
@@ -130,6 +131,43 @@ Perfect for landing pages, marketing sites, or any static HTML:
 </html>
 ```
+### Option 3: Hosted Checkout (Zero Backend)
+**NEW!** The simplest integration - redirect to Recur's hosted checkout page:
+```html
+<!DOCTYPE html>
+<html>
+<body>
+  <!-- Drop-in checkout button - no JavaScript required! -->
+  <recur-checkout
+    publishable-key="pk_test_xxx"
+    product-id="prod_xxx"
+    success-url="https://yoursite.com/success"
+    cancel-url="https://yoursite.com/cancel">
+    訂閱方案
+  </recur-checkout>
+  <script src="https://unpkg.com/recur-tw@latest/dist/recur.umd.js"></script>
+</body>
+</html>
+```
+Or use the JavaScript API:
+```javascript
+const recur = RecurCheckout.init({
+  publishableKey: 'pk_test_xxx'
+});
+// Redirect to hosted checkout
+await recur.redirectToCheckout({
+  productId: 'prod_xxx',
+  successUrl: 'https://yoursite.com/success',
+  cancelUrl: 'https://yoursite.com/cancel',
+});
+```
 ---
 ## 🔑 Get Your API Key
@@ -182,6 +220,85 @@ await checkout({
 });
 ```
+#### Hosted Checkout Mode (NEW!)
+The simplest integration - no iframe or embedded form needed:
+```tsx
+const recur = RecurCheckout.init({
+  publishableKey: 'pk_test_xxx'
+});
+// Method 1: Redirect to hosted checkout
+await recur.redirectToCheckout({
+  productId: 'prod_xxx',
+  successUrl: 'https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}',
+  cancelUrl: 'https://yoursite.com/cancel',
+  customerEmail: 'user@example.com', // optional, pre-fill email
+  mode: 'SUBSCRIPTION', // PAYMENT, SUBSCRIPTION, or SETUP
+});
+// Method 2: Get session URL without redirecting
+const session = await recur.createCheckoutSession({
+  productId: 'prod_xxx',
+  successUrl: 'https://yoursite.com/success',
+  cancelUrl: 'https://yoursite.com/cancel',
+});
+console.log(session.url); // https://checkout.recur.tw/cs_xxx
+console.log(session.expiresAt); // Session expires in 30 minutes
+```
+**Checkout Modes:**
+- `PAYMENT` - One-time payment
+- `SUBSCRIPTION` - Recurring subscription (default)
+- `SETUP` - Save card for future charges
+---
+### `<recur-checkout>` Web Component
+A drop-in checkout button that requires zero JavaScript:
+```html
+<recur-checkout
+  publishable-key="pk_test_xxx"
+  product-id="prod_xxx"
+  success-url="/success"
+  cancel-url="/cancel"
+  customer-email="user@example.com"
+  mode="SUBSCRIPTION"
+  button-text="Subscribe Now"
+  button-style="gradient">
+</recur-checkout>
+```
+**Attributes:**
+| Attribute | Required | Description |
+|-----------|----------|-------------|
+| `publishable-key` | Yes | Your Recur publishable key |
+| `product-id` | Yes | The product ID to purchase |
+| `success-url` | Yes | Redirect URL after successful payment |
+| `cancel-url` | Yes | Redirect URL if user cancels |
+| `customer-email` | No | Pre-fill customer email |
+| `mode` | No | `PAYMENT`, `SUBSCRIPTION`, or `SETUP` |
+| `button-text` | No | Button label (default: button content) |
+| `button-style` | No | `primary`, `outline`, or `gradient` |
+| `disabled` | No | Disable the button |
+| `api-base-url` | No | Custom API URL (for development) |
+**Events:**
+```javascript
+document.querySelector('recur-checkout').addEventListener('checkout-started', (e) => {
+  console.log('Redirecting to:', e.detail.url);
+});
+document.querySelector('recur-checkout').addEventListener('checkout-error', (e) => {
+  console.error('Error:', e.detail.message);
+});
+```
 ---
 ### React Hooks

package/dist/index.cjs CHANGED Viewed

@@ -1885,6 +1885,265 @@ var init_payment_form = __esm({
   }
 });
+// src/components/checkout-button.ts
+var checkout_button_exports = {};
+__export(checkout_button_exports, {
+  RecurCheckoutButton: () => RecurCheckoutButton
+});
+var RecurCheckoutButton;
+var init_checkout_button = __esm({
+  "src/components/checkout-button.ts"() {
+    RecurCheckoutButton = class extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_isLoading", false);
+        __publicField(this, "handleClick", async (e) => {
+          e.preventDefault();
+          if (this._isLoading || this.hasAttribute("disabled")) {
+            return;
+          }
+          const publishableKey = this.getAttribute("publishable-key");
+          const productId = this.getAttribute("product-id");
+          const successUrl = this.getAttribute("success-url");
+          const cancelUrl = this.getAttribute("cancel-url");
+          if (!publishableKey) {
+            this.dispatchError("Missing required attribute: publishable-key");
+            return;
+          }
+          if (!productId) {
+            this.dispatchError("Missing required attribute: product-id");
+            return;
+          }
+          if (!successUrl) {
+            this.dispatchError("Missing required attribute: success-url");
+            return;
+          }
+          if (!cancelUrl) {
+            this.dispatchError("Missing required attribute: cancel-url");
+            return;
+          }
+          this._isLoading = true;
+          this.render();
+          this.setupEventListeners();
+          try {
+            const session = await this.createCheckoutSession({
+              publishableKey,
+              productId,
+              successUrl: this.resolveUrl(successUrl),
+              cancelUrl: this.resolveUrl(cancelUrl),
+              customerEmail: this.getAttribute("customer-email") || void 0,
+              mode: this.getAttribute("mode")
+            });
+            this.dispatchEvent(new CustomEvent("checkout-started", {
+              detail: { sessionId: session.id, url: session.url },
+              bubbles: true,
+              composed: true
+            }));
+            window.location.href = session.url;
+          } catch (error) {
+            this._isLoading = false;
+            this.render();
+            this.setupEventListeners();
+            this.dispatchError(error.message || "Failed to create checkout session");
+          }
+        });
+        this.attachShadow({ mode: "open" });
+      }
+      static get observedAttributes() {
+        return [
+          "publishable-key",
+          "product-id",
+          "success-url",
+          "cancel-url",
+          "customer-email",
+          "mode",
+          "button-text",
+          "button-style",
+          "disabled"
+        ];
+      }
+      connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+      }
+      disconnectedCallback() {
+        const button = this.shadowRoot?.querySelector("button");
+        if (button) {
+          button.removeEventListener("click", this.handleClick);
+        }
+      }
+      attributeChangedCallback(_name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          this.render();
+        }
+      }
+      render() {
+        const buttonText = this.getAttribute("button-text") || this.textContent?.trim() || "\u8A02\u95B1";
+        const buttonStyle = this.getAttribute("button-style") || "primary";
+        const isDisabled = this.hasAttribute("disabled") || this._isLoading;
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+        button {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-size: 16px;
+          font-weight: 500;
+          padding: 12px 24px;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          min-width: 120px;
+          border: none;
+        }
+        button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        /* Primary style (default) */
+        button.primary {
+          background: #18181b;
+          color: #ffffff;
+        }
+        button.primary:hover:not(:disabled) {
+          background: #27272a;
+        }
+        button.primary:active:not(:disabled) {
+          background: #3f3f46;
+        }
+        /* Outline style */
+        button.outline {
+          background: transparent;
+          color: #18181b;
+          border: 2px solid #18181b;
+        }
+        button.outline:hover:not(:disabled) {
+          background: #f4f4f5;
+        }
+        button.outline:active:not(:disabled) {
+          background: #e4e4e7;
+        }
+        /* Gradient style */
+        button.gradient {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: #ffffff;
+        }
+        button.gradient:hover:not(:disabled) {
+          opacity: 0.9;
+        }
+        button.gradient:active:not(:disabled) {
+          opacity: 0.8;
+        }
+        /* Loading spinner */
+        .spinner {
+          width: 16px;
+          height: 16px;
+          border: 2px solid currentColor;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.6s linear infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        /* Focus state */
+        button:focus-visible {
+          outline: 2px solid #3b82f6;
+          outline-offset: 2px;
+        }
+      </style>
+      <button
+        class="${buttonStyle}"
+        ${isDisabled ? "disabled" : ""}
+        aria-busy="${this._isLoading}"
+      >
+        ${this._isLoading ? '<span class="spinner"></span>' : ""}
+        <span>${this._isLoading ? "\u8655\u7406\u4E2D..." : buttonText}</span>
+      </button>
+    `;
+      }
+      setupEventListeners() {
+        const button = this.shadowRoot?.querySelector("button");
+        if (button) {
+          button.addEventListener("click", this.handleClick);
+        }
+      }
+      async createCheckoutSession(options) {
+        const baseUrl = this.getApiBaseUrl();
+        const response = await fetch(`${baseUrl}/v1/checkout/sessions`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Recur-Publishable-Key": options.publishableKey
+          },
+          body: JSON.stringify({
+            productId: options.productId,
+            mode: options.mode,
+            successUrl: options.successUrl,
+            cancelUrl: options.cancelUrl,
+            customerEmail: options.customerEmail
+          })
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error?.message || `HTTP ${response.status}: Failed to create checkout session`);
+        }
+        return response.json();
+      }
+      getApiBaseUrl() {
+        const customBaseUrl = this.getAttribute("api-base-url");
+        if (customBaseUrl) {
+          return customBaseUrl;
+        }
+        if (typeof window !== "undefined") {
+          const hostname = window.location.hostname;
+          if (hostname === "localhost" || hostname.includes(".test") || hostname.includes(".local") || hostname === "127.0.0.1") {
+            return `${window.location.protocol}//${window.location.host}/api`;
+          }
+        }
+        return "https://api.recur.tw";
+      }
+      resolveUrl(url) {
+        if (url.startsWith("/")) {
+          return `${window.location.origin}${url}`;
+        }
+        return url;
+      }
+      dispatchError(message) {
+        console.error("[recur-checkout]", message);
+        this.dispatchEvent(new CustomEvent("checkout-error", {
+          detail: { message },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    };
+    if (typeof window !== "undefined" && !customElements.get("recur-checkout")) {
+      customElements.define("recur-checkout", RecurCheckoutButton);
+    }
+  }
+});
 // src/components/index.ts
 async function registerComponents() {
   if (typeof window === "undefined") {
@@ -1898,7 +2157,8 @@ async function registerComponents() {
     Promise.resolve().then(() => (init_skeleton_loader(), skeleton_loader_exports)),
     Promise.resolve().then(() => (init_payment_form_skeleton(), payment_form_skeleton_exports)),
     Promise.resolve().then(() => (init_toast(), toast_exports)),
-    Promise.resolve().then(() => (init_payment_form(), payment_form_exports))
+    Promise.resolve().then(() => (init_payment_form(), payment_form_exports)),
+    Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports))
   ]);
   const components = [
     "recur-loading-spinner",
@@ -1908,7 +2168,8 @@ async function registerComponents() {
     "recur-payment-form-skeleton",
     "recur-toast",
     "recur-toast-container",
-    "recur-payment-form"
+    "recur-payment-form",
+    "recur-checkout"
   ];
   const unregistered = components.filter((name) => !customElements.get(name));
   if (unregistered.length > 0) {