recur-tw 0.0.1 → 0.0.2

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
  1. package/README.md +162 -7
  2. package/dist/index.cjs +593 -48
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +103 -9
  5. package/dist/index.d.ts +103 -9
  6. package/dist/index.js +582 -41
  7. package/dist/index.js.map +1 -1
  8. package/dist/recur.umd.js +145 -0
  9. package/dist/recur.umd.js.map +1 -0
  10. package/package.json +20 -3
package/README.md CHANGED
@@ -1,14 +1,25 @@
1
1
  # Recur SDK (Taiwan)
2
2
 
3
- A React SDK for embedding subscription checkout flows in your application.
3
+ A React & Vanilla JS SDK for embedding subscription checkout flows in your application.
4
4
 
5
5
  **專為台灣市場設計** - 使用 PAYUNi 支付網關處理訂閱式付款。
6
6
 
7
- Taiwan-specific subscription checkout SDK powered by PAYUNi payment gateway.
7
+ Taiwan-specific subscription checkout SDK.
8
8
 
9
- ## Installation
9
+ ## 🚀 Features
10
10
 
11
- Install the package via npm or pnpm:
11
+ - ✅ **React SDK** - Full React integration with hooks
12
+ - ✅ **Vanilla JS** - Use with plain HTML/JavaScript (no framework required)
13
+ - ✅ **Multiple Modes** - Modal, iframe, or redirect checkout flows
14
+ - ✅ **TypeScript** - Full type definitions included
15
+ - ✅ **Secure** - API key authentication
16
+ - ✅ **Taiwan-focused** - PAYUNi payment integration
17
+
18
+ ---
19
+
20
+ ## 📦 Installation
21
+
22
+ ### For React Projects
12
23
 
13
24
  ```bash
14
25
  npm install recur-tw
@@ -18,15 +29,159 @@ pnpm add recur-tw
18
29
  yarn add recur-tw
19
30
  ```
20
31
 
21
- Then import it in your React application:
32
+ ### For Static HTML/JavaScript
33
+
34
+ ```html
35
+ <!-- Via CDN (unpkg) -->
36
+ <script src="https://unpkg.com/recur-tw@latest/dist/recur.umd.js"></script>
37
+
38
+ <!-- Via CDN (jsdelivr) -->
39
+ <script src="https://cdn.jsdelivr.net/npm/recur-tw@latest/dist/recur.umd.js"></script>
40
+ ```
41
+
42
+ ---
43
+
44
+ ## 🎯 Quick Start
45
+
46
+ ### Option 1: Vanilla JavaScript (Static HTML)
47
+
48
+ Perfect for landing pages, marketing sites, or any static HTML:
49
+
50
+ ```html
51
+ <!DOCTYPE html>
52
+ <html>
53
+ <body>
54
+ <button id="checkout-btn">訂閱方案</button>
55
+
56
+ <script src="https://unpkg.com/recur-tw@latest/dist/recur.umd.js"></script>
57
+ <script>
58
+ // Initialize SDK
59
+ const recur = RecurCheckout.init({
60
+ publishableKey: 'pk_test_your_key_here'
61
+ });
62
+
63
+ // Checkout on button click
64
+ document.getElementById('checkout-btn').addEventListener('click', async () => {
65
+ await recur.checkout({
66
+ planId: 'plan_xxx',
67
+ customerName: '王小明',
68
+ customerEmail: 'user@example.com',
69
+ mode: 'modal' // 'modal', 'iframe', or 'redirect'
70
+ });
71
+ });
72
+ </script>
73
+ </body>
74
+ </html>
75
+ ```
76
+
77
+ [See full Vanilla JS examples →](./examples/)
78
+
79
+ ### Option 2: React/Next.js
80
+
81
+ Full framework integration with React hooks:
22
82
 
23
83
  ```tsx
24
84
  import { RecurProvider, useRecur } from 'recur-tw';
85
+
86
+ // 1. Wrap your app with RecurProvider
87
+ export default function App() {
88
+ return (
89
+ <RecurProvider config={{ publishableKey: 'pk_test_xxx' }}>
90
+ <YourApp />
91
+ </RecurProvider>
92
+ );
93
+ }
94
+
95
+ // 2. Use checkout in your components
96
+ function CheckoutButton() {
97
+ const { checkout, isCheckingOut } = useRecur();
98
+
99
+ return (
100
+ <button onClick={() => checkout({ planId: 'pro' })} disabled={isCheckingOut}>
101
+ {isCheckingOut ? 'Processing...' : 'Subscribe'}
102
+ </button>
103
+ );
104
+ }
105
+ ```
106
+
107
+ ---
108
+
109
+ ## 🔑 Get Your API Key
110
+
111
+ 1. Go to your organization settings
112
+ 2. Navigate to **API Keys** tab
113
+ 3. Click **Create API Key**
114
+ 4. Copy your `pk_test_...` key
115
+
116
+ [Learn more about API Keys →](./API_KEYS_GUIDE.md)
117
+
118
+ ---
119
+
120
+ ## 📖 Documentation
121
+
122
+ ### For Vanilla JavaScript Users
123
+
124
+ #### Checkout Modes
125
+
126
+ **Modal Mode** - Open payment in a popup modal:
127
+ ```javascript
128
+ await recur.checkout({
129
+ planId: 'plan_xxx',
130
+ mode: 'modal',
131
+ onClose: () => console.log('Modal closed')
132
+ });
133
+ ```
134
+
135
+ **iframe Mode** - Embed payment in your page:
136
+ ```javascript
137
+ await recur.checkout({
138
+ planId: 'plan_xxx',
139
+ mode: 'iframe',
140
+ container: '#checkout-container' // CSS selector or HTMLElement
141
+ });
142
+ ```
143
+
144
+ **Redirect Mode** - Full page redirect (default):
145
+ ```javascript
146
+ await recur.checkout({
147
+ planId: 'plan_xxx',
148
+ mode: 'redirect' // or omit mode parameter
149
+ });
150
+ ```
151
+
152
+ #### API Reference
153
+
154
+ ```javascript
155
+ // Initialize
156
+ const recur = RecurCheckout.init({
157
+ publishableKey: string, // Required
158
+ baseUrl?: string // Optional, defaults to current origin
159
+ });
160
+
161
+ // Checkout
162
+ await recur.checkout({
163
+ planId: string, // Required
164
+ customerName?: string,
165
+ customerEmail?: string,
166
+ customerPhone?: string,
167
+ mode?: 'modal' | 'iframe' | 'redirect', // Default: 'redirect'
168
+ container?: string | HTMLElement, // Required for iframe mode
169
+ onSuccess?: (result) => void,
170
+ onError?: (error) => void,
171
+ onClose?: () => void
172
+ });
173
+
174
+ // Close modal or remove iframe manually
175
+ recur.close();
25
176
  ```
26
177
 
27
- ## Quick Start
178
+ [See complete examples →](./examples/)
179
+
180
+ ---
181
+
182
+ ### For React/Next.js Users
28
183
 
29
- ### 1. Wrap your app with RecurProvider
184
+ #### 1. Wrap your app with RecurProvider
30
185
 
31
186
  ```tsx
32
187
  // app/layout.tsx or your root component