@revenuecat/purchases-js 0.0.4 → 0.0.5

package/CHANGELOG

@@ -1,7 +1,3 @@
-# 0.0.4
-
-- Fix bug in 0.0.3 that didn't include the dist/ folder in the NPM package
-
 # 0.0.3
 
 - Add prettier by @francocorreasosa in #13

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/main.d.ts

@@ -12,5 +12,7 @@ export declare class Purchases {
     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

@@ -1,42 +1,42 @@
-var f = Object.defineProperty;
-var P = (e, t, n) => t in e ? f(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var s = (e, t, n) => (P(e, typeof t != "symbol" ? t + "" : t, n), n);
-var l = (e, t, n) => new Promise((o, c) => {
-  var _ = (r) => {
+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(r));
+      a(n.next(o));
     } catch (u) {
       c(u);
     }
-  }, p = (r) => {
+  }, p = (o) => {
     try {
-      a(n.throw(r));
+      a(n.throw(o));
     } catch (u) {
       c(u);
     }
-  }, a = (r) => r.done ? o(r.value) : Promise.resolve(r.value).then(_, p);
+  }, a = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(s, p);
   a((n = n.apply(e, t)).next());
 });
-const m = (e) => ({
+const P = (e) => ({
   amount: e.amount,
   currency: e.currency
-}), A = (e) => ({
+}), m = (e) => ({
   id: e.id,
   identifier: e.identifier,
   displayName: e.display_name,
-  currentPrice: e.current_price ? m(e.current_price) : null,
+  currentPrice: e.current_price ? P(e.current_price) : null,
   normalPeriodDuration: e.normal_period_duration
-}), g = (e) => ({
+}), A = (e) => ({
   id: e.id,
   identifier: e.identifier,
   displayName: e.display_name,
-  rcBillingProduct: e.rc_billing_product ? A(e.rc_billing_product) : null
-}), y = (e) => ({
+  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(g)
-}), b = (e) => {
+  packages: e.packages.map(A)
+}), y = (e) => {
   var t, n;
   return {
     nextAction: e.next_action,
@@ -44,22 +44,22 @@ const m = (e) => ({
       clientSecret: (n = (t = e.data) == null ? void 0 : t.client_secret) != null ? n : void 0
     }
   };
-}, i = class i {
+}, r = class r {
   constructor(t) {
-    s(this, "_API_KEY", null);
-    s(this, "_APP_USER_ID", null);
-    s(this, "toOfferingsPage", (t) => ({
-      offerings: t.offerings.map(y),
+    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, i._RC_ENDPOINT === void 0 && console.error(
+    this._API_KEY = t, r._RC_ENDPOINT === void 0 && console.error(
       "Project was build without some of the environment variables set"
     );
   }
   listOfferings() {
-    return l(this, null, function* () {
+    return _(this, null, function* () {
       const n = yield (yield fetch(
-        `${i._RC_ENDPOINT}/${i._BASE_PATH}/offerings`,
+        `${r._RC_ENDPOINT}/${r._BASE_PATH}/offerings`,
         {
           headers: {
             Authorization: `Bearer ${this._API_KEY}`,
@@ -72,9 +72,9 @@ const m = (e) => ({
     });
   }
   isEntitledTo(t, n) {
-    return l(this, null, function* () {
-      const o = yield fetch(
-        `${i._RC_ENDPOINT}/${i._BASE_PATH}/entitlements/${t}`,
+    return _(this, null, function* () {
+      const i = yield fetch(
+        `${r._RC_ENDPOINT}/${r._BASE_PATH}/entitlements/${t}`,
         {
           headers: {
             Authorization: `Bearer ${this._API_KEY}`,
@@ -83,15 +83,30 @@ const m = (e) => ({
           }
         }
       );
-      return o.status === 404 ? !1 : (yield o.json()).entitlements.map(
+      return i.status === 404 ? !1 : (yield i.json()).entitlements.map(
         (a) => a.lookup_key
       ).includes(n);
     });
   }
-  subscribe(t, n, o = "production") {
-    return l(this, null, function* () {
-      const c = o === "sandbox", p = yield (yield fetch(
-        `${i._RC_ENDPOINT}/${i._BASE_PATH}/subscribe`,
+  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: {
@@ -106,12 +121,24 @@ const m = (e) => ({
           })
         }
       )).json();
-      return b(p);
+      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];
     });
   }
 };
-s(i, "_RC_ENDPOINT", "https://api.revenuecat.com"), s(i, "_BASE_PATH", "rcbilling/v1");
-let d = i;
+l(r, "_RC_ENDPOINT", "https://api.revenuecat.com"), l(r, "_BASE_PATH", "rcbilling/v1");
+let f = r;
 export {
-  d as Purchases
+  f as Purchases
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenuecat/purchases-js",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "types": "dist/main.d.ts",
   "main": "dist/purchases-js.js",