@vrs-pay/js 0.1.0 → 0.1.1
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.
- package/README.md +75 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,28 +1,90 @@
|
|
|
1
1
|
# @vrs-pay/js
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **Lightweight, framework-agnostic browser SDK for VRS Pay.**
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@vrs-pay/js)
|
|
6
|
+
[](https://github.com/vrs-pay/multivrs)
|
|
7
|
+
|
|
8
|
+
`@vrs-pay/js` is the core JavaScript client for VRS Pay in the browser. It works seamlessly with **any frontend framework** (Vanilla JS, React, Vue, Svelte, Angular, Solid) or static websites to load pricing plans, trigger Stripe checkout sessions, query customer billing records, and verify feature entitlements.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Features
|
|
13
|
+
|
|
14
|
+
- 🌐 **Framework-agnostic**: Zero framework dependencies. Use in Vanilla JS, Vue, Svelte, Angular, React, or Astro.
|
|
15
|
+
- 🔒 **Safe client-side access**: Operates strictly using your publishable key (`pk_test_...` or `pk_live_...`). Rejects secret keys to prevent accidental leaks.
|
|
16
|
+
- 💳 **Direct Checkout**: Redirect users straight to Stripe-powered checkout sessions with custom return URLs.
|
|
17
|
+
- 👤 **Customer Self-Service**: Fetch active subscriptions, view past invoices, cancel or resume subscriptions.
|
|
18
|
+
- ⚡ **Feature Entitlements**: Query client-side feature flags and limits based on the user's active tier.
|
|
19
|
+
- 💱 **Price Formatting**: Built-in currency formatting utility (`formatPrice`) with localized currencies and recurring intervals.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @vrs-pay/js
|
|
27
|
+
# or
|
|
28
|
+
bun add @vrs-pay/js
|
|
29
|
+
# or
|
|
30
|
+
pnpm add @vrs-pay/js
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Quickstart
|
|
4
36
|
|
|
5
37
|
```ts
|
|
6
38
|
import { createVrsPayClient, formatPrice } from "@vrs-pay/js";
|
|
7
39
|
|
|
40
|
+
// Initialize the client
|
|
8
41
|
const vrs = createVrsPayClient({
|
|
9
|
-
publishableKey: "
|
|
10
|
-
apiUrl: "https://your-vrs-pay-api",
|
|
11
|
-
//
|
|
12
|
-
|
|
13
|
-
|
|
42
|
+
publishableKey: "pk_test_your_key",
|
|
43
|
+
apiUrl: "https://your-vrs-pay-api.com",
|
|
44
|
+
// Return your server-generated customer session token
|
|
45
|
+
customerSession: async () => {
|
|
46
|
+
const res = await fetch("/api/vrs-session");
|
|
47
|
+
return res.text();
|
|
48
|
+
},
|
|
14
49
|
});
|
|
15
50
|
|
|
16
|
-
|
|
17
|
-
const
|
|
51
|
+
// 1. Fetch products & pricing tiers (public, no customer required)
|
|
52
|
+
const products = await vrs.pricing();
|
|
53
|
+
const priceString = formatPrice(products[0].prices[0]); // e.g. "$29.00 / month"
|
|
18
54
|
|
|
19
|
-
|
|
55
|
+
// 2. Redirect to Stripe Checkout
|
|
56
|
+
await vrs.redirectToCheckout({
|
|
57
|
+
price: products[0].prices[0].id,
|
|
58
|
+
successUrl: "https://example.com/billing?status=success",
|
|
59
|
+
cancelUrl: "https://example.com/pricing",
|
|
60
|
+
});
|
|
20
61
|
|
|
62
|
+
// 3. Manage customer subscriptions and invoices
|
|
21
63
|
const { subscriptions, invoices } = await vrs.customer();
|
|
22
|
-
|
|
23
|
-
|
|
64
|
+
if (subscriptions[0]) {
|
|
65
|
+
// Cancel subscription at period end
|
|
66
|
+
await vrs.cancelSubscription(subscriptions[0].id);
|
|
24
67
|
|
|
25
|
-
|
|
68
|
+
// Or resume subscription
|
|
69
|
+
await vrs.resumeSubscription(subscriptions[0].id);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// 4. Client-side entitlement checks
|
|
73
|
+
if (await vrs.hasFeature("csv_export")) {
|
|
74
|
+
showExportButton();
|
|
75
|
+
}
|
|
26
76
|
```
|
|
27
77
|
|
|
28
|
-
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## The VRS Pay Ecosystem
|
|
81
|
+
|
|
82
|
+
- **`@vrs-pay/js`** *(This package)*: Universal browser SDK for any frontend.
|
|
83
|
+
- **`@vrs-pay/react`**: Turnkey React 18 & 19 components (`<PricingTable />`, `<PricingComparisonTable />`, `<CustomerPortal />`, `<Gate />`) and hooks.
|
|
84
|
+
- **`@vrs-pay/sdk`**: Server SDK for Node.js, Bun, Cloudflare Workers, and backend API routes.
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
MIT © [VRS Pay](https://github.com/vrs-pay)
|