@revenuecat/purchases-js 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,202 @@
-# RCBilling JS
+<h3 align="center">😻 In-App Subscriptions Made Easy 😻</h3>
+<h4 align="center">🕸️ For the web 🕸️</h4>
 
-JS SDK for RC Billing.
+RevenueCat is a powerful, reliable, and free to use in-app purchase server with cross-platform support.
+This repository includes all you need to manage your subscriptions on your website or web app using RevenueCat.
+
+Sign up to [get started for free](https://app.revenuecat.com/signup).
+
+# Prerequisites
+
+Login @ [app.revenuecat.com](https://app.revenuecat.com)
+
+- Create a Project (if you haven't already)
+
+### ======> Only while testing <======
+
+- Add the private project id (a.k.a. app_id) to the following feature flags
+  - RCBILLING
+  - GENERATE_V2_SUBSCRIPTION_MODELS_FOR_RCBILLING
+  - GENERATE_V2_SUBSCRIPTION_MODELS
+
+### ======> Only while testing <======
+
+- Add a new RCBilling app
+  - Get the `RC_PUBLISHABLE_API_KEY` (you will need it soon)
+  - Connect your Stripe account (More payment gateways are coming soon)
+- Create some products for the RCBilling App
+- Create an offering and add packages with RCBilling products
+- Create the entitlements you need in your app and link them to the RCBilling products
+
+# Installation
+
+### ======> Only during testing <======
+
+- Get a token to download the sdk from our private npm registry
+- Set the environment variable `NODE_AUTH_TOKEN`
+
+```bash
+export NODE_AUTH_TOKEN="the token you got from the npm registry"
+```
+
+### ======> Only during testing <======
+
+- Add the library to your project's dependencies
+
+```
+npm add --save @revenuecat/purchases-js
+```
+
+# Usage
+
+## Download the current Offerings
+
+By downloading the current Offerings you can easily build a Paywall page using the embedded Packages and their
+associated `rcBillingProduct` and price.
+
+```typescript
+const purchases = new Purchases("your RC_PUBLISHABLE_API_KEY");
+
+purchases.listOfferings().then((offeringsPage) => {
+  offeringsPage.offerings.forEach((offering) => {
+    console.log(offering);
+  });
+});
+```
+
+This should print the current offerings you have set up in your RC Account.
+
+Please check out [this file](https://github.com/RevenueCat/purchases-js/blob/main/src/entities/offerings.ts) for the
+Offering's data structure
+
+## Check User Entitlements
+
+You can check the entitlements granted to your users throughout all the platforms, now
+also on your website!
+
+```typescript
+const appUserId = "the unique id of the user in your systems";
+const entitlementId = "the entitlementId you set up in RC";
+
+const purchases = new Purchases("your RC_PUBLISHABLE_API_KEY");
+
+purchases.isEntitledTo(appUserId, entitlementId).then((isEntitled) => {
+  if (isEntitled == true) {
+    console.log(`User ${appUserID} is entitled to ${entitlementId}`);
+  } else {
+    console.log(`User ${appUserID} is not entitled to ${entitlementId}`);
+  }
+});
+```
+
+As example, you can build a cool React component with it:
+
+```tsx
+const WithEntitlement = ({ appUserId, entitlementId, children }) => {
+  const [isEntitled, setIsEntitled] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const purchases = new Purchases("your RC_PUBLISHABLE_API_KEY");
+    purchases.isEntitledTo(appUserId, entitlementId).then((isEntitled) => {
+      setIsEntitled(isEntitled);
+    });
+  }, [appUserId, entitlementId]);
+
+  if (isEntitled === null) {
+    return <>"loading..."</>;
+  }
+
+  if (isEntitled === true) {
+    return <>{children}</>;
+  }
+
+  return <>You are not entitled!</>;
+};
+```
+
+And then use it in your app:
+
+```tsx
+const App = () => (
+  <>
+    <WithEntitlement appUserId={"user12345"} entitlementId={"functionality5"}>
+      <Functionality5 />
+    </WithEntitlement>
+  </>
+);
+```
+
+## Subscribe a User to an entitlement and allow payment with Stripe
+
+RCBilling allows you to use your payment gateway for payments.
+In this example we will show Stripe, more will be supported soon!
+
+### Context
+
+You built your paywall, and your user just clicked on the offer they want to subscribe to.
+
+### 1. Call the .subscribe method to initialise the process
+
+```tsx
+const purchases = new Purchases("your RC_PUBLISHABLE_API_KEY");
+// You can retrieve this from the offerings you downloaded, as example:
+// offeringsPage.offerings[0].packages[0].rcBillingProduct.identifier
+const rcBillingProductIndentifier =
+  "the Product Identifier the user wants to buy";
+const appUserId =
+  "the unique id of the user that wants to subscribe to your product";
+
+purchase.subscribe(appUserId, rcBillingProductIndentifier).then((response) => {
+  if (response.nextAction === "collect_payment_info") {
+    // Use the clientSecret to show the StripeElements payment components
+    showStripeElements({
+      setupIntentClientSecret: response.data.clientSecret,
+    });
+  } else {
+    // No need to collect payment info, just wait for the entitlement to be granted
+  }
+});
+```
+
+### 2. [If nextAction === 'collect_payment_info'] Show the Stripe Elements to collect payment
+
+```tsx
+// Set up stripe as shown in their docs
+const stripePromise = loadStripe(
+  import.meta.env.VITE_RC_STRIPE_PK_KEY as string,
+  { stripeAccount: import.meta.env.VITE_RC_STRIPE_ACCOUNT_ID as string },
+);
+
+// Use the clientSecret obtained in the step 1. Call the .subscribe method to initialise the process
+const PaymentForm = ({ clientSecret }) => {
+  const handleSubmit = async (e: SyntheticEvent) => {
+    e.preventDefault();
+    stripe
+      .confirmSetup({
+        elements,
+        clientSecret,
+        confirmParams: {
+          return_url: `${window.location.origin}/success`,
+        },
+        redirect: "if_required",
+      })
+      .then((response) => {
+        // All is done you can now wait for the entitlement to be granted.
+      });
+  };
+
+  return (
+    <form id="payment-form" onSubmit={handleSubmit}>
+      <PaymentElement id="payment-element" options={paymentElementOptions} />
+    </form>
+  );
+};
+```
+
+### 3. Wait for the entitlement to be granted
+
+You can now loop and use the `.isEntitledTo` while Stripe communicates with our servers to grant the entitlement.
+As soon as the entitlement is given, your user's payment went through!
 
 # Development
 
@@ -15,10 +211,11 @@ npm install
 npm run build:dev
 ```
 
-Then in your local project you can do:
+To avoid publishing the package you can set it up as a local dependency.
+In your testing project install the library as.
 
 ```bash
-npm i ../path/to/rcbilling-js
+npm i /path/to/rcbilling-js
 ```
 
 ## Running tests

package/dist/entities/offerings.d.ts

@@ -0,0 +1,34 @@
+import { ServerResponse } from "./types";
+export interface Price {
+    amount: number;
+    currency: string;
+}
+export interface Product {
+    id: string;
+    displayName: string;
+    identifier: string;
+    currentPrice: Price | null;
+    normalPeriodDuration: string | null;
+}
+export interface Package {
+    id: string;
+    identifier: string;
+    displayName: string;
+    rcBillingProduct: Product | null;
+}
+export interface Offering {
+    id: string;
+    identifier: string;
+    displayName: string;
+    packages: Package[];
+}
+export interface OfferingsPage {
+    offerings: Offering[];
+    priceByPackageId: {
+        [packageId: string]: number;
+    };
+}
+export declare const toPrice: (data: ServerResponse) => Price;
+export declare const toProduct: (data: ServerResponse) => Product;
+export declare const toPackage: (data: ServerResponse) => Package;
+export declare const toOffering: (data: ServerResponse) => Offering;

package/dist/entities/subscribe-response.d.ts

@@ -0,0 +1,8 @@
+import { ServerResponse } from "./types";
+export interface SubscribeResponse {
+    nextAction: string;
+    data: {
+        clientSecret?: string;
+    };
+}
+export declare const toSubscribeResponse: (raw: ServerResponse) => SubscribeResponse;

package/dist/entities/types.d.ts

@@ -0,0 +1 @@
+export type ServerResponse = any;

package/dist/main.d.ts

@@ -0,0 +1,18 @@
+import { Offering as InnerOffering, OfferingsPage as InnerOfferingsPage, Package as InnerPackage } from "./entities/offerings";
+import { SubscribeResponse } from "./entities/subscribe-response";
+export type OfferingsPage = InnerOfferingsPage;
+export type Offering = InnerOffering;
+export type Package = InnerPackage;
+export declare class Purchases {
+    _API_KEY: string | null;
+    _APP_USER_ID: string | null;
+    private static readonly _RC_ENDPOINT;
+    private static readonly _BASE_PATH;
+    constructor(apiKey: string);
+    private toOfferingsPage;
+    listOfferings(): Promise<OfferingsPage>;
+    isEntitledTo(appUserId: string, entitlementIdentifier: string): Promise<boolean>;
+    waitForEntitlement(appUserId: string, entitlementIdentifier: string, maxAttempts?: number): Promise<boolean>;
+    subscribe(appUserId: string, productId: string, environment?: "sandbox" | "production"): Promise<SubscribeResponse>;
+    getPackage(packageIdentifier: string): Promise<Package | null>;
+}

package/dist/purchases-js.js

@@ -0,0 +1,144 @@
+var d = Object.defineProperty;
+var g = (e, t, n) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var l = (e, t, n) => (g(e, typeof t != "symbol" ? t + "" : t, n), n);
+var _ = (e, t, n) => new Promise((i, c) => {
+  var s = (o) => {
+    try {
+      a(n.next(o));
+    } catch (u) {
+      c(u);
+    }
+  }, p = (o) => {
+    try {
+      a(n.throw(o));
+    } catch (u) {
+      c(u);
+    }
+  }, a = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(s, p);
+  a((n = n.apply(e, t)).next());
+});
+const P = (e) => ({
+  amount: e.amount,
+  currency: e.currency
+}), m = (e) => ({
+  id: e.id,
+  identifier: e.identifier,
+  displayName: e.display_name,
+  currentPrice: e.current_price ? P(e.current_price) : null,
+  normalPeriodDuration: e.normal_period_duration
+}), A = (e) => ({
+  id: e.id,
+  identifier: e.identifier,
+  displayName: e.display_name,
+  rcBillingProduct: e.rc_billing_product ? m(e.rc_billing_product) : null
+}), h = (e) => ({
+  id: e.id,
+  identifier: e.identifier,
+  displayName: e.display_name,
+  packages: e.packages.map(A)
+}), y = (e) => {
+  var t, n;
+  return {
+    nextAction: e.next_action,
+    data: {
+      clientSecret: (n = (t = e.data) == null ? void 0 : t.client_secret) != null ? n : void 0
+    }
+  };
+}, r = class r {
+  constructor(t) {
+    l(this, "_API_KEY", null);
+    l(this, "_APP_USER_ID", null);
+    l(this, "toOfferingsPage", (t) => ({
+      offerings: t.offerings.map(h),
+      priceByPackageId: t.prices_by_package_id
+    }));
+    this._API_KEY = t, r._RC_ENDPOINT === void 0 && console.error(
+      "Project was build without some of the environment variables set"
+    );
+  }
+  listOfferings() {
+    return _(this, null, function* () {
+      const n = yield (yield fetch(
+        `${r._RC_ENDPOINT}/${r._BASE_PATH}/offerings`,
+        {
+          headers: {
+            Authorization: `Bearer ${this._API_KEY}`,
+            "Content-Type": "application/json",
+            Accept: "application/json"
+          }
+        }
+      )).json();
+      return this.toOfferingsPage(n);
+    });
+  }
+  isEntitledTo(t, n) {
+    return _(this, null, function* () {
+      const i = yield fetch(
+        `${r._RC_ENDPOINT}/${r._BASE_PATH}/entitlements/${t}`,
+        {
+          headers: {
+            Authorization: `Bearer ${this._API_KEY}`,
+            "Content-Type": "application/json",
+            Accept: "application/json"
+          }
+        }
+      );
+      return i.status === 404 ? !1 : (yield i.json()).entitlements.map(
+        (a) => a.lookup_key
+      ).includes(n);
+    });
+  }
+  waitForEntitlement(t, n, i = 10) {
+    return new Promise((s, p) => {
+      const a = (o = 1) => this.isEntitledTo(t, n).then((u) => {
+        if (o > i)
+          return s(!1);
+        if (u)
+          return s(!0);
+        setTimeout(
+          () => a(o + 1),
+          1e3
+        );
+      }).catch(p);
+      a();
+    });
+  }
+  subscribe(t, n, i = "production") {
+    return _(this, null, function* () {
+      const c = i === "sandbox", p = yield (yield fetch(
+        `${r._RC_ENDPOINT}/${r._BASE_PATH}/subscribe`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${this._API_KEY}`,
+            "Content-Type": "application/json",
+            Accept: "application/json"
+          },
+          body: JSON.stringify({
+            app_user_id: t,
+            product_id: n,
+            is_sandbox: c
+          })
+        }
+      )).json();
+      return y(p);
+    });
+  }
+  getPackage(t) {
+    return _(this, null, function* () {
+      const n = yield this.listOfferings(), i = [];
+      n.offerings.forEach(
+        (s) => i.push(...s.packages)
+      );
+      const c = i.filter(
+        (s) => s.identifier === t
+      );
+      return c.length === 0 ? null : c[0];
+    });
+  }
+};
+l(r, "_RC_ENDPOINT", "https://api.revenuecat.com"), l(r, "_BASE_PATH", "rcbilling/v1");
+let f = r;
+export {
+  f as Purchases
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenuecat/purchases-js",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "types": "dist/main.d.ts",
   "main": "dist/purchases-js.js",
@@ -14,6 +14,7 @@
     "lint": "eslint . --ext .ts",
     "format": "eslint . --ext .ts --fix",
     "test": "vitest",
+    "prettier": "prettier --write .",
     "prettier:ci": "prettier --check ."
   },
   "devDependencies": {