recur-tw 0.0.3-beta.3 → 0.0.3-beta.5

package/README.md

@@ -1,18 +1,20 @@
 # Recur SDK (Taiwan)
 
-A React & Vanilla JS SDK for embedding subscription checkout flows in your application.
+A React & Vanilla JS SDK for embedding subscription checkout flows with PAYUNi payment integration.
 
 **專為台灣市場設計** - 使用 PAYUNi 支付網關處理訂閱式付款。
 
-Taiwan-specific subscription checkout SDK.
+Taiwan-specific subscription checkout SDK with embedded payment forms powered by Web Components.
 
 ## 🚀 Features
 
-- ✅ **React SDK** - Full React integration with hooks
+- ✅ **React SDK** - Full React integration with hooks (`usePlans`, `useRecur`)
 - ✅ **Vanilla JS** - Use with plain HTML/JavaScript (no framework required)
-- ✅ **Multiple Modes** - Modal, iframe, or redirect checkout flows
+- ✅ **Embedded Checkout** - Native payment forms with PAYUNi credit card fields
+- ✅ **Web Components** - Modern, encapsulated UI components
+- ✅ **Custom Styling** - Fully customizable with shadcn/ui compatibility
 - ✅ **TypeScript** - Full type definitions included
-- ✅ **Secure** - API key authentication
+- ✅ **SSR Safe** - Works with Next.js, Remix, and other SSR frameworks
 - ✅ **Taiwan-focused** - PAYUNi payment integration
 
 ---
@@ -43,7 +45,61 @@ yarn add recur-tw
 
 ## 🎯 Quick Start
 
-### Option 1: Vanilla JavaScript (Static HTML)
+### Option 1: React/Next.js
+
+Full framework integration with React hooks and embedded checkout:
+
+```tsx
+'use client';
+
+import { RecurProvider, usePlans, useRecur } from 'recur-tw';
+
+// 1. Wrap your app with RecurProvider
+export default function App() {
+  return (
+    <RecurProvider
+      config={{
+        publishableKey: 'pk_test_xxx',
+        containerElementId: 'recur-payment-container' // For embedded checkout
+      }}
+    >
+      <SubscriptionPage />
+    </RecurProvider>
+  );
+}
+
+// 2. Fetch plans and checkout
+function SubscriptionPage() {
+  const { data: plans, isLoading } = usePlans();
+  const { checkout, isCheckingOut } = useRecur();
+
+  if (isLoading) return <div>Loading plans...</div>;
+
+  return (
+    <div>
+      {plans?.map((plan) => (
+        <button
+          key={plan.id}
+          onClick={() => checkout({
+            planId: plan.id,
+            customerEmail: 'user@example.com',
+            customerName: 'John Doe',
+            customerPhone: '+886912345678',
+          })}
+          disabled={isCheckingOut}
+        >
+          Subscribe to {plan.name} - NT${plan.price}
+        </button>
+      ))}
+
+      {/* Embedded payment form will appear here */}
+      <div id="recur-payment-container"></div>
+    </div>
+  );
+}
+```
+
+### Option 2: Vanilla JavaScript (Static HTML)
 
 Perfect for landing pages, marketing sites, or any static HTML:
 
@@ -66,7 +122,7 @@ Perfect for landing pages, marketing sites, or any static HTML:
         planId: 'plan_xxx',
         customerName: '王小明',
         customerEmail: 'user@example.com',
-        mode: 'modal' // 'modal', 'iframe', or 'redirect'
+        mode: 'redirect' // 'redirect' or 'embedded'
       });
     });
   </script>
@@ -74,375 +130,370 @@ Perfect for landing pages, marketing sites, or any static HTML:
 </html>
 ```
 
-[See full Vanilla JS examples →](./examples/)
-
-### Option 2: React/Next.js
-
-Full framework integration with React hooks:
-
-```tsx
-import { RecurProvider, useRecur } from 'recur-tw';
-
-// 1. Wrap your app with RecurProvider
-export default function App() {
-  return (
-    <RecurProvider config={{ publishableKey: 'pk_test_xxx' }}>
-      <YourApp />
-    </RecurProvider>
-  );
-}
-
-// 2. Use checkout in your components
-function CheckoutButton() {
-  const { checkout, isCheckingOut } = useRecur();
-
-  return (
-    <button onClick={() => checkout({ planId: 'pro' })} disabled={isCheckingOut}>
-      {isCheckingOut ? 'Processing...' : 'Subscribe'}
-    </button>
-  );
-}
-```
-
 ---
 
 ## 🔑 Get Your API Key
 
-1. Go to your organization settings
-2. Navigate to **API Keys** tab
-3. Click **Create API Key**
-4. Copy your `pk_test_...` key
+1. Go to your Recur dashboard
+2. Navigate to **Settings** → **API Keys**
+3. Click **Create Publishable Key**
+4. Copy your `pk_test_...` or `pk_live_...` key
 
-[Learn more about API Keys →](./API_KEYS_GUIDE.md)
+> ⚠️ **Never** use your secret key (`sk_*`) in client-side code!
 
 ---
 
 ## 📖 Documentation
 
-### For Vanilla JavaScript Users
+### Checkout Modes
 
-#### Checkout Modes
+#### Embedded Mode (Recommended)
 
-**Modal Mode** - Open payment in a popup modal:
-```javascript
-await recur.checkout({
-  planId: 'plan_xxx',
-  mode: 'modal',
-  onClose: () => console.log('Modal closed')
-});
-```
+Embed the full payment form directly in your page with PAYUNi credit card fields:
 
-**iframe Mode** - Embed payment in your page:
-```javascript
-await recur.checkout({
-  planId: 'plan_xxx',
-  mode: 'iframe',
-  container: '#checkout-container' // CSS selector or HTMLElement
-});
-```
+```tsx
+const { checkout } = useRecur();
 
-**Redirect Mode** - Full page redirect (default):
-```javascript
-await recur.checkout({
+await checkout({
   planId: 'plan_xxx',
-  mode: 'redirect' // or omit mode parameter
+  customerEmail: 'user@example.com',
+  customerName: 'John Doe',
+  customerPhone: '+886912345678',
+  // mode: 'embedded' is default when containerElementId is configured
 });
 ```
 
-#### API Reference
+**Features:**
+- ✅ Native PAYUNi credit card input fields
+- ✅ No redirects - complete flow in your app
+- ✅ Fully customizable styling
+- ✅ Web Components based (modern, encapsulated)
 
-```javascript
-// Initialize
-const recur = RecurCheckout.init({
-  publishableKey: string,  // Required
-  baseUrl?: string         // Optional, defaults to current origin
-});
+#### Redirect Mode
 
-// Checkout
-await recur.checkout({
-  planId: string,          // Required
-  customerName?: string,
-  customerEmail?: string,
-  customerPhone?: string,
-  mode?: 'modal' | 'iframe' | 'redirect',  // Default: 'redirect'
-  container?: string | HTMLElement,        // Required for iframe mode
-  onSuccess?: (result) => void,
-  onError?: (error) => void,
-  onClose?: () => void
-});
+Redirect to a full-page checkout:
 
-// Close modal or remove iframe manually
-recur.close();
+```tsx
+await checkout({
+  planId: 'plan_xxx',
+  mode: 'redirect',
+  successUrl: 'https://yoursite.com/success',
+  cancelUrl: 'https://yoursite.com/cancel',
+});
 ```
 
-[See complete examples →](./examples/)
-
 ---
 
-### For React/Next.js Users
+### React Hooks
 
-#### 1. Wrap your app with RecurProvider
+#### `usePlans()`
+
+Fetch available subscription plans:
 
 ```tsx
-// app/layout.tsx or your root component
-import { RecurProvider } from 'recur-tw';
+import { usePlans } from 'recur-tw';
+
+function PlansPage() {
+  const { data: plans, isLoading, error } = usePlans();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
 
-export default function RootLayout({ children }) {
   return (
-    <html>
-      <body>
-        <RecurProvider config={{ organizationId: 'your-org-id' }}>
-          {children}
-        </RecurProvider>
-      </body>
-    </html>
+    <div>
+      {plans?.map((plan) => (
+        <div key={plan.id}>
+          <h3>{plan.name}</h3>
+          <p>NT${plan.price} / {plan.billingPeriod}</p>
+          {plan.trialDays > 0 && <p>🎉 {plan.trialDays} days free trial</p>}
+        </div>
+      ))}
+    </div>
   );
 }
 ```
 
-### 2. Use the checkout function in your components
+#### `useRecur()`
 
-```tsx
-// components/pricing-button.tsx
-'use client';
+Access checkout functionality:
 
+```tsx
 import { useRecur } from 'recur-tw';
 
-export function PricingButton({ planId }: { planId: string }) {
-  const { checkout, isCheckingOut } = useRecur();
+function CheckoutButton({ planId }: { planId: string }) {
+  const { checkout, isCheckingOut, config, updateConfig } = useRecur();
 
   return (
-    <Button
-      onClick={async () => {
-        await checkout({ planId });
-      }}
+    <button
+      onClick={() => checkout({ planId })}
       disabled={isCheckingOut}
     >
       {isCheckingOut ? 'Processing...' : 'Subscribe'}
-    </Button>
+    </button>
   );
 }
 ```
 
-## Configuration
+**Returns:**
+- `checkout(options)` - Initiate checkout flow
+- `isCheckingOut` - Boolean indicating if checkout is in progress
+- `config` - Current SDK configuration
+- `updateConfig(newConfig)` - Update configuration dynamically
+- `fetchPlans()` - Manually fetch plans
+
+---
+
+### Configuration
 
-### RecurProvider Props
+#### RecurProvider Props
 
 ```tsx
 interface RecurConfig {
-  // Organization ID for the checkout
-  organizationId?: string;
+  // Required: Your publishable API key
+  publishableKey: string;
 
-  // Base URL for API calls (defaults to current origin)
+  // Optional: API base URL (defaults to production)
   baseUrl?: string;
 
-  // Redirect mode: 'redirect' (default) or 'popup'
-  redirectMode?: 'redirect' | 'popup';
-
-  // Success callback URL
-  successUrl?: string;
-
-  // Cancel callback URL
-  cancelUrl?: string;
+  // Optional: Container element ID for embedded checkout
+  containerElementId?: string;
 }
 ```
 
-## Usage Examples
-
-### Basic Checkout
+Example:
 
 ```tsx
-const { checkout } = useRecur();
-
-await checkout({
-  planId: 'pro-monthly',
-});
+<RecurProvider
+  config={{
+    publishableKey: process.env.NEXT_PUBLIC_RECUR_KEY!,
+    baseUrl: 'https://api.recur.tw', // optional
+    containerElementId: 'recur-payment-container',
+  }}
+>
+  {children}
+</RecurProvider>
 ```
 
-### Checkout with Customer Information
+#### Checkout Options
 
 ```tsx
-const { checkout } = useRecur();
+interface CheckoutOptions {
+  // Required: Plan ID to subscribe to
+  planId: string;
 
-await checkout({
-  planId: 'pro-monthly',
-  customerName: 'John Doe',
-  customerEmail: 'john@example.com',
-  customerPhone: '+886912345678',
-});
+  // Customer information
+  customerEmail?: string;
+  customerName?: string;
+  customerPhone?: string;
+
+  // Checkout mode
+  mode?: 'embedded' | 'redirect'; // Default: 'embedded' if containerElementId is set
+
+  // Redirect URLs (for redirect mode)
+  successUrl?: string;
+  cancelUrl?: string;
+
+  // Callbacks
+  onPaymentComplete?: (subscription: Subscription) => void;
+  onError?: (error: CheckoutError) => void;
+}
 ```
 
-### Checkout with Callbacks
+---
 
-```tsx
-const { checkout } = useRecur();
+### Custom Styling
 
-await checkout({
-  planId: 'pro-monthly',
-  onSuccess: (result) => {
-    console.log('Checkout initiated:', result.subscription.id);
-    // Show success toast
-  },
-  onError: (error) => {
-    console.error('Checkout failed:', error.message);
-    // Show error toast
-  },
-});
+The SDK uses Web Components with customizable styles. You can override PAYUNi input styles to match your design system.
+
+#### Default Styling (shadcn/ui compatible)
+
+The SDK automatically applies shadcn-compatible focus rings:
+
+```css
+.form-input-focus {
+  border-color: var(--ring, hsl(215 16% 47%)) !important;
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring, hsl(215 16% 47%)) 50%, transparent) !important;
+}
 ```
 
-### Popup Mode
+#### Custom Styling
+
+Override styles by providing custom CSS:
 
 ```tsx
-// In your RecurProvider config
-<RecurProvider config={{ redirectMode: 'popup' }}>
-  {children}
-</RecurProvider>
+const paymentForm = document.createElement('recur-payment-form');
+paymentForm.setAttribute('custom-styles', `
+  /* Custom focus style */
+  .form-input-focus {
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
+  }
+
+  /* Adjust container heights */
+  #recur-payment-container-card-no,
+  #recur-payment-container-card-exp,
+  #recur-payment-container-card-cvc {
+    height: 40px !important;
+  }
+`);
+```
 
-// In your component
-const { checkout } = useRecur();
+The custom styles are injected into the Light DOM, allowing them to affect PAYUNi's iframe elements while keeping other UI styles encapsulated.
 
-await checkout({
-  planId: 'pro-monthly',
-  onPaymentComplete: (subscription) => {
-    console.log('Payment completed!', subscription);
-    // Refresh page or update UI
-  },
-  onPaymentCancel: () => {
-    console.log('Payment cancelled');
-  },
-});
-```
+---
 
-### Custom Form
+### Advanced Examples
+
+#### Embedded Checkout with Error Handling
 
 ```tsx
 'use client';
 
 import { useState } from 'react';
-import { useRecur } from '@/lib/recur';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { useRecur } from 'recur-tw';
 
-export function CustomCheckoutForm({ planId }: { planId: string }) {
+export function CheckoutForm({ planId }: { planId: string }) {
   const { checkout, isCheckingOut } = useRecur();
-  const [email, setEmail] = useState('');
-  const [name, setName] = useState('');
+  const [error, setError] = useState<string | null>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleCheckout = async () => {
+    setError(null);
 
     await checkout({
       planId,
-      customerEmail: email,
-      customerName: name,
-      onSuccess: () => {
-        // Show success message
+      customerEmail: 'user@example.com',
+      onPaymentComplete: (subscription) => {
+        console.log('Payment successful!', subscription);
+        // Redirect to success page or show confirmation
       },
-      onError: (error) => {
-        alert(error.message);
+      onError: (err) => {
+        setError(err.message);
       },
     });
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <Input
-        type="text"
-        placeholder="Name"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        required
-      />
-      <Input
-        type="email"
-        placeholder="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        required
-      />
-      <Button type="submit" disabled={isCheckingOut}>
-        {isCheckingOut ? 'Processing...' : 'Subscribe'}
-      </Button>
-    </form>
+    <div>
+      <button onClick={handleCheckout} disabled={isCheckingOut}>
+        {isCheckingOut ? 'Processing...' : 'Subscribe Now'}
+      </button>
+
+      {error && <div className="error">{error}</div>}
+
+      {/* Payment form will appear here */}
+      <div id="recur-payment-container"></div>
+    </div>
   );
 }
 ```
 
-### Dynamic Organization ID
+#### Dynamic Plan Selection
 
 ```tsx
-// Override organization ID per checkout
-const { checkout } = useRecur();
+'use client';
 
-await checkout({
-  planId: 'pro-monthly',
-  organizationId: 'different-org-id',
-});
-```
+import { useState } from 'react';
+import { usePlans, useRecur } from 'recur-tw';
 
-### Update Configuration Dynamically
+export function PricingTable() {
+  const { data: plans } = usePlans();
+  const { checkout, isCheckingOut } = useRecur();
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
 
-```tsx
-const { updateConfig } = useRecur();
+  const handleSelectPlan = async (planId: string) => {
+    setSelectedPlan(planId);
 
-// Switch to popup mode
-updateConfig({ redirectMode: 'popup' });
+    await checkout({
+      planId,
+      customerEmail: 'user@example.com',
+      customerName: 'John Doe',
+    });
+  };
 
-// Update organization ID
-updateConfig({ organizationId: 'new-org-id' });
+  return (
+    <div>
+      {!selectedPlan ? (
+        // Plan selection
+        <div className="plans-grid">
+          {plans?.map((plan) => (
+            <div key={plan.id} className="plan-card">
+              <h3>{plan.name}</h3>
+              <p className="price">NT${plan.price} / {plan.billingPeriod}</p>
+              {plan.trialDays > 0 && (
+                <p className="trial">🎉 {plan.trialDays} day free trial</p>
+              )}
+              <button onClick={() => handleSelectPlan(plan.id)}>
+                Select Plan
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        // Payment form
+        <div>
+          <button onClick={() => setSelectedPlan(null)}>← Back to plans</button>
+          <div id="recur-payment-container"></div>
+        </div>
+      )}
+    </div>
+  );
+}
 ```
 
-## API Reference
+#### Update Config Dynamically
 
-### `useRecur()`
-
-Returns a `RecurContextValue` object with the following properties:
+```tsx
+const { config, updateConfig } = useRecur();
 
-#### `checkout(options: CheckoutOptions): Promise<void>`
+// Switch to different API endpoint
+updateConfig({
+  baseUrl: 'https://staging-api.recur.tw'
+});
 
-Initiates a checkout flow.
+// Update publishable key
+updateConfig({
+  publishableKey: 'pk_live_xxx'
+});
+```
 
-**Options:**
-- `planId` (required): The ID of the subscription plan
-- `customerName` (optional): Customer's name
-- `customerEmail` (optional): Customer's email
-- `customerPhone` (optional): Customer's phone number
-- `organizationId` (optional): Override the organization ID
-- `onSuccess` (optional): Callback when checkout is initiated successfully
-- `onError` (optional): Callback when checkout fails
-- `onPaymentComplete` (optional): Callback when payment is completed (popup mode only)
-- `onPaymentCancel` (optional): Callback when payment is cancelled (popup mode only)
+---
 
-#### `isCheckingOut: boolean`
+## Web Components Architecture
 
-Indicates whether a checkout is currently in progress.
+The SDK uses modern Web Components for better encapsulation and reusability:
 
-#### `config: RecurConfig`
+### RecurPaymentForm Component
 
-Current configuration object.
+The embedded payment form is a custom element:
 
-#### `updateConfig(config: Partial<RecurConfig>): void`
+```html
+<recur-payment-form
+  container-id="recur-payment-container"
+  custom-styles="..."
+></recur-payment-form>
+```
 
-Updates the configuration.
+**Features:**
+- Shadow DOM for style isolation
+- Light DOM for PAYUNi iframe integration
+- Custom events for form submission
+- Attribute-based configuration
 
-## Error Handling
+**Events:**
+- `submit` - Fired when user submits payment
+- `error` - Fired when an error occurs
 
-All checkout errors are caught and passed to the `onError` callback:
+**Custom Styling:**
+Styles are injected into Light DOM to affect PAYUNi iframes:
 
-```tsx
-await checkout({
-  planId: 'pro-monthly',
-  onError: (error) => {
-    console.error('Error code:', error.code);
-    console.error('Error message:', error.message);
-    console.error('Error details:', error.details);
-  },
-});
+```javascript
+paymentForm.setAttribute('custom-styles', `
+  .form-input-focus { /* PAYUNi focus styles */ }
+  #container-card-no { /* Card number field styles */ }
+`);
 ```
 
-Common error codes:
-- `CHECKOUT_FAILED`: Failed to initiate checkout
-- `CHECKOUT_ERROR`: General checkout error
+---
 
 ## TypeScript Support
 
@@ -451,84 +502,140 @@ The SDK is written in TypeScript and provides full type definitions:
 ```tsx
 import type {
   RecurConfig,
+  RecurContextValue,
   CheckoutOptions,
   CheckoutResult,
   CheckoutError,
+  Plan,
+  PlansResult,
+  Subscription,
   SubscriptionResult,
 } from 'recur-tw';
 ```
 
-## Advanced Usage
-
-### Server-Side Organization Detection
+### Type Definitions
 
 ```tsx
-// app/layout.tsx
-import { RecurProvider } from '@/lib/recur';
-import { getOrganizationIdFromDomain } from '@/lib/utils';
+interface Plan {
+  id: string;
+  name: string;
+  price: number;
+  billingPeriod: 'WEEKLY' | 'MONTHLY' | 'YEARLY' | 'CUSTOM';
+  trialDays: number;
+  description?: string;
+  features?: Record<string, any>;
+}
 
-export default async function RootLayout({ children }) {
-  const organizationId = await getOrganizationIdFromDomain();
+interface Subscription {
+  id: string;
+  status: string;
+  planId: string;
+  amount: number;
+  billingPeriod: string;
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+}
 
-  return (
-    <html>
-      <body>
-        <RecurProvider config={{ organizationId }}>
-          {children}
-        </RecurProvider>
-      </body>
-    </html>
-  );
+interface CheckoutError {
+  code: string;
+  message: string;
+  details?: any;
 }
 ```
 
-### Multi-Organization Support
+---
 
-```tsx
-// Let each checkout specify its own organization
-<RecurProvider>
-  <App />
-</RecurProvider>
+## Error Handling
 
-// In component
-const { checkout } = useRecur();
+All errors are caught and passed to callbacks:
 
-// Store A
-await checkout({ planId: 'plan-a', organizationId: 'store-a' });
+```tsx
+await checkout({
+  planId: 'pro-monthly',
+  onError: (error) => {
+    console.error('Error code:', error.code);
+    console.error('Error message:', error.message);
 
-// Store B
-await checkout({ planId: 'plan-b', organizationId: 'store-b' });
+    // Handle specific errors
+    switch (error.code) {
+      case 'CHECKOUT_ERROR':
+        // Handle checkout initialization error
+        break;
+      case 'PAYMENT_FAILED':
+        // Handle payment failure
+        break;
+      default:
+        // Handle unknown error
+    }
+  },
+});
 ```
 
-### Integration with Toast Notifications
+Common error codes:
+- `CHECKOUT_ERROR` - Failed to initialize checkout
+- `PAYMENT_FAILED` - Payment processing failed
+- `INVALID_PLAN` - Plan ID not found
+- `API_ERROR` - API request failed
 
-```tsx
-import { useRecur } from '@/lib/recur';
-import { toast } from 'sonner';
+---
 
-export function CheckoutButton({ planId }: { planId: string }) {
-  const { checkout, isCheckingOut } = useRecur();
+## Browser Support
 
-  const handleCheckout = async () => {
-    await checkout({
-      planId,
-      onSuccess: (result) => {
-        toast.success('Redirecting to payment...');
-      },
-      onError: (error) => {
-        toast.error(error.message);
-      },
-    });
-  };
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Mobile browsers with Web Components support
 
-  return (
-    <button onClick={handleCheckout} disabled={isCheckingOut}>
-      {isCheckingOut ? 'Loading...' : 'Subscribe Now'}
-    </button>
-  );
-}
+The SDK uses modern Web Components (Custom Elements) which are widely supported in modern browsers.
+
+---
+
+## Examples
+
+Check out the `/examples` directory for complete working examples:
+
+- **Next.js Basic** - Full Next.js integration with App Router
+- **Vanilla JS** - Static HTML examples
+- **React SPA** - Create React App example
+
+---
+
+## Migration Guide
+
+### From v0.0.2 to v0.0.3
+
+**Breaking Changes:**
+- `organizationId` → `publishableKey` in config
+- Checkout now uses Web Components instead of innerHTML
+- New `usePlans()` hook for fetching plans
+- Embedded mode is now the default when `containerElementId` is set
+
+**Migration:**
+
+```tsx
+// Before (v0.0.2)
+<RecurProvider config={{ organizationId: 'org_xxx' }}>
+
+// After (v0.0.3)
+<RecurProvider config={{ publishableKey: 'pk_test_xxx' }}>
 ```
 
+---
+
+## Contributing
+
+This is part of the Recur project. Please see the main repository for contribution guidelines.
+
+---
+
 ## License
 
-This SDK is part of the Recur project.
+MIT
+
+---
+
+## Support
+
+- Documentation: https://github.com/kaikhq/recur.tw
+- Issues: https://github.com/kaikhq/recur.tw/issues
+- Email: support@recur.tw