@lavapayments/checkout 0.1.3 → 0.2.0

package/README.md

@@ -19,14 +19,14 @@ import { useLavaCheckout } from '@lavapayments/checkout';
 import { useState } from 'react';
 
 function CheckoutButton() {
-  const [connectionId, setConnectionId] = useState(null);
-  
+  const [customerId, setCustomerId] = useState(null);
+
   const { open } = useLavaCheckout({
-    onSuccess: ({ connectionId }) => {
+    onSuccess: ({ customerId }) => {
       console.log('Checkout successful!');
-      setConnectionId(connectionId);
-      // Store the connectionId for your application
-      saveConnectionIdToDatabase(userId, connectionId);
+      setCustomerId(customerId);
+      // Store the customerId for your application
+      saveCustomerIdToDatabase(userId, customerId);
     },
     onCancel: ({ checkoutSessionId }) => {
       console.log('Checkout cancelled:', checkoutSessionId);
@@ -51,32 +51,32 @@ function CheckoutButton() {
 }
 ```
 
-### Top-up Implementation
+### Credit Bundle Implementation
 
-To allow users to add funds to an existing wallet:
+To allow existing subscribers to buy a credit pack:
 
 ```jsx
 import { useLavaCheckout } from '@lavapayments/checkout';
 
-function TopUpButton({ connectionId }) {
+function BuyCreditBundleButton({ customerId, creditBundleId }) {
   const { open } = useLavaCheckout({
     onSuccess: () => {
-      console.log('Top-up successful!');
+      console.log('Credit bundle purchase successful!');
       // Refresh balance display
     },
     onCancel: () => {
-      console.log('Top-up cancelled');
+      console.log('Purchase cancelled');
     }
   });
 
   return (
     <button
       onClick={() => {
-        // Request a top-up checkout session token from your backend
-        fetch('/api/create-topup-session', {
+        // Request a credit bundle checkout session token from your backend
+        fetch('/api/create-bundle-session', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ connectionId })
+          body: JSON.stringify({ customerId, creditBundleId })
         })
           .then(res => res.json())
           .then(data => {
@@ -85,7 +85,7 @@ function TopUpButton({ connectionId }) {
           });
       }}
     >
-      Add Funds
+      Buy Credits
     </button>
   );
 }
@@ -93,4 +93,43 @@ function TopUpButton({ connectionId }) {
 
 ## Related Documentation
 
-For complete documentation on Lava's usage-based billing system and backend integration, visit [lavapayments.com](https://www.lavapayments.com).
+For complete documentation on Lava's usage-based billing system and backend integration, visit [www.lava.so](https://www.lava.so).
+
+## Recommended Subscription Pattern (Logged In + Logged Out)
+
+Use the same subscription CTA for both states. Your backend should pass `customer_id` only when you already know the customer.
+
+- Logged-out/new customer: omit `customer_id` (checkout collects identity and creates customer)
+- Logged-in/returning customer: include `customer_id` (checkout reuses existing customer)
+
+```ts
+// backend example
+app.post('/api/create-subscription-session', async (req, res) => {
+  const { planId, customerId } = req.body;
+
+  const body: Record<string, string> = {
+    checkout_mode: 'subscription',
+    origin_url: 'https://your-app.com',
+    plan_id: planId,
+  };
+
+  // Include only for known/returning customers
+  if (customerId) {
+    body.customer_id = customerId;
+  }
+
+  const lavaRes = await fetch('https://api.lavapayments.com/v1/checkout_sessions', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${process.env.LAVA_SECRET_KEY}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+
+  const session = await lavaRes.json();
+  res.json({ checkoutSessionToken: session.checkout_session_token });
+});
+```
+
+Then in your frontend, always call `open(checkoutSessionToken)` from `useLavaCheckout`.

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 declare function useLavaCheckout({ onSuccess, onCancel, onError, }: {
     onSuccess?: (args: {
         checkoutSessionId: string;
-        connectionId: string;
+        customerId: string;
     }) => void;
     onCancel?: (args: {
         checkoutSessionId: string;
@@ -11,7 +11,7 @@ declare function useLavaCheckout({ onSuccess, onCancel, onError, }: {
         error: string;
     }) => void;
 }): {
-    open: (checkoutSessionToken: string) => void;
+    open: (token: string) => void;
 };
 
 export { useLavaCheckout };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 declare function useLavaCheckout({ onSuccess, onCancel, onError, }: {
     onSuccess?: (args: {
         checkoutSessionId: string;
-        connectionId: string;
+        customerId: string;
     }) => void;
     onCancel?: (args: {
         checkoutSessionId: string;
@@ -11,7 +11,7 @@ declare function useLavaCheckout({ onSuccess, onCancel, onError, }: {
         error: string;
     }) => void;
 }): {
-    open: (checkoutSessionToken: string) => void;
+    open: (token: string) => void;
 };
 
 export { useLavaCheckout };

package/dist/index.js

@@ -39,7 +39,7 @@ function useLavaCheckout({
       checkoutSession = JSON.parse(
         atob(checkoutSessionToken)
       );
-      if (!checkoutSession.secret || !checkoutSession.base) {
+      if (!(checkoutSession.secret && checkoutSession.base)) {
         throw new Error("Invalid checkout session token");
       }
     } catch (error) {
@@ -76,7 +76,7 @@ function useLavaCheckout({
           if (typeof onSuccess === "function") {
             onSuccess({
               checkoutSessionId: e.data.checkoutSessionId,
-              connectionId: e.data.connectionId
+              customerId: e.data.customerId
             });
           }
           setCheckoutSessionToken(null);
@@ -87,6 +87,8 @@ function useLavaCheckout({
           }
           setCheckoutSessionToken(null);
           break;
+        default:
+          break;
       }
     }
     function onBeforeUnload(e) {
@@ -104,9 +106,9 @@ function useLavaCheckout({
         iframe = null;
       }
     };
-  }, [checkoutSessionToken]);
-  const open = (0, import_react.useCallback)((checkoutSessionToken2) => {
-    setCheckoutSessionToken(checkoutSessionToken2);
+  }, [checkoutSessionToken, onCancel, onError, onSuccess]);
+  const open = (0, import_react.useCallback)((token) => {
+    setCheckoutSessionToken(token);
   }, []);
   return { open };
 }

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { useEffect, useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 function useLavaCheckout({
   onSuccess,
   onCancel,
@@ -15,7 +15,7 @@ function useLavaCheckout({
       checkoutSession = JSON.parse(
         atob(checkoutSessionToken)
       );
-      if (!checkoutSession.secret || !checkoutSession.base) {
+      if (!(checkoutSession.secret && checkoutSession.base)) {
         throw new Error("Invalid checkout session token");
       }
     } catch (error) {
@@ -52,7 +52,7 @@ function useLavaCheckout({
           if (typeof onSuccess === "function") {
             onSuccess({
               checkoutSessionId: e.data.checkoutSessionId,
-              connectionId: e.data.connectionId
+              customerId: e.data.customerId
             });
           }
           setCheckoutSessionToken(null);
@@ -63,6 +63,8 @@ function useLavaCheckout({
           }
           setCheckoutSessionToken(null);
           break;
+        default:
+          break;
       }
     }
     function onBeforeUnload(e) {
@@ -80,9 +82,9 @@ function useLavaCheckout({
         iframe = null;
       }
     };
-  }, [checkoutSessionToken]);
-  const open = useCallback((checkoutSessionToken2) => {
-    setCheckoutSessionToken(checkoutSessionToken2);
+  }, [checkoutSessionToken, onCancel, onError, onSuccess]);
+  const open = useCallback((token) => {
+    setCheckoutSessionToken(token);
   }, []);
   return { open };
 }

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@lavapayments/checkout",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": false,
   "description": "Lava Checkout",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "unpkg": "dist/index.umd.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup --dts --format cjs,esm src/index.ts",
+    "build": "tsup --dts --format cjs,esm --external react --external react-dom src/index.ts",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src/",
-    "format": "prettier --write \"src/**/*.ts\"",
     "prepublishOnly": "npm run build",
     "clean": "rm -rf dist"
   },
@@ -31,11 +30,6 @@
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
-    "@types/eslint": "^8.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.0.0",
-    "prettier": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "tsup": "^8.0.0",