@hackthedev/dsync-pay 1.0.5 → 1.0.7

package/README.md

@@ -1,6 +1,6 @@
 # dSyncPay
 
-As another part of the dSync library family this library is responsible for payment handling currently supporting PayPal and Coinbase Crypto payments. Its works independently and without any percentage cuts by using your own API keys.
+As another part of the dSync library family this library is responsible for payment handling currently supporting PayPal and Coinbase Crypto payments. It works independently and without any percentage cuts by using your own API keys.
 
 > [!NOTE]
 >
@@ -31,11 +31,11 @@ const payments = new dSyncPay({
         sandbox: true // or false for production
     },
     coinbase: {
-        apiKey: 'xxx',
-        webhookSecret: 'xxx' // optional
+        apiKey: 'xxx',        // coinbase commerce API key
+        webhookSecret: 'xxx'  // optional, for webhook verification
     },
-    
-    // events from the library
+
+    // events
     onPaymentCreated: (data) => {},
     onPaymentCompleted: (data) => {},
     onPaymentFailed: (data) => {},
@@ -47,6 +47,10 @@ const payments = new dSyncPay({
 });
 ```
 
+### Coinbase API Key
+
+dSyncPay uses **Coinbase Commerce** for crypto payments - not the Coinbase exchange or developer platform. Get your API key at `https://commerce.coinbase.com/settings/security`.
+
 ------
 
 ## PayPal Usage
@@ -54,60 +58,81 @@ const payments = new dSyncPay({
 ### Create an order
 
 ```js
-// returnUrl and cancelUrl are auto-generated based on domain + basePath
-const payment = await payments.paypal.createOrder({
-    title: 'product name',
-    price: 19.99
-    // returnUrl automatically becomes https://domain.com/payments/paypal/verify
-    // cancelUrl will become https://domain.com/payments/cancel
-});
-
-// or override manually
 const payment = await payments.paypal.createOrder({
     title: 'product name',
     price: 19.99,
-    returnUrl: 'https://custom.com/success',
-    cancelUrl: 'https://custom.com/cancel',
-    metadata: { userId: '123' }
+    // optional params:
+    description: 'product description',   // default: 'no description'
+    quantity: 1,                           // default: 1
+    currency: 'EUR',                       // default: 'EUR'
+    customId: 'your-custom-id',           // default: auto-generated 17-digit id
+    metadata: { userId: '123' },          // passed through to onPaymentCompleted
+    returnUrl: 'https://custom.com/ok',   // default: https://domain.com/payments/paypal/verify
+    cancelUrl: 'https://custom.com/no'    // default: https://domain.com/payments/cancel
 });
 
-// manual verify. result.status === 'COMPLETED'. see paypal api.
+// redirect user to:
+payment.approvalUrl
+
+// result object:
+{
+    provider: 'paypal',
+    type: 'order',
+    approvalUrl: '...',
+    transactionId: 'customId',
+    orderId: '...',
+    amount: 19.99,
+    currency: 'EUR',
+    metadata: {},
+    rawResponse: {}
+}
+```
+
+> [!NOTE] 
+>
+> metadata is cached in memory for 1 hour and passed through to the payment callbacks automatically.
+
+### Verify an order manually
+
+```js
 const result = await payments.paypal.verifyOrder(orderId);
+// result.status === 'COMPLETED'
 ```
 
 ### Managing subscriptions
 
 ```js
-// requires you to setup a plan one time
+// step 1: create a plan (one time setup)
 const plan = await payments.paypal.createPlan({
     name: 'monthly premium',
     price: 9.99,
-    interval: 'MONTH'
-});	
-// save plan.planId
-
-// then you can create subscriptions based on that plan
-const sub = await payments.paypal.createSubscription({
-    planId: 'P-xxxxx'
-    // returnUrl becomes https://domain.com/payments/paypal/subscription/verify
-    // cancelUrl becomes https://domain.com/payments/cancel
+    interval: 'MONTH',       // MONTH, YEAR, WEEK, DAY
+    // optional:
+    description: '...',
+    currency: 'EUR',         // default: 'EUR'
+    frequency: 1             // default: 1
 });
+// save plan.planId for later use
 
-// or override manually
+// step 2: create a subscription
 const sub = await payments.paypal.createSubscription({
     planId: 'P-xxxxx',
-    returnUrl: 'https://custom.com/success',
-    cancelUrl: 'https://custom.com/cancel'
+    // optional:
+    customId: 'your-custom-id',
+    metadata: { userId: '123' },
+    returnUrl: 'https://custom.com/success',  // default: https://domain.com/payments/paypal/subscription/verify
+    cancelUrl: 'https://custom.com/cancel'    // default: https://domain.com/payments/cancel
 });
 
-// redirect to sub.approvalUrl
-// also returns sub.subscriptionId
+// redirect user to:
+sub.approvalUrl
+// also available: sub.subscriptionId
 
-// manually verify subscription
+// step 3: verify subscription manually
 const result = await payments.paypal.verifySubscription(subscriptionId);
 // result.status === 'ACTIVE'
 
-// cancel subscription
+// cancel a subscription
 await payments.paypal.cancelSubscription(subscriptionId, 'reason');
 ```
 
@@ -118,26 +143,38 @@ await payments.paypal.cancelSubscription(subscriptionId, 'reason');
 ### Creating a charge
 
 ```js
-// redirectUrl and cancelUrl are auto-generated
-const charge = await payments.coinbase.createCharge({
-    title: 'product name',
-    price: 19.99
-    // redirectUrl becomes  https://domain.com/payments/coinbase/verify
-    // cancelUrl becomes https://domain.com/payments/cancel
-});
-
-// or override manually
 const charge = await payments.coinbase.createCharge({
     title: 'product name',
     price: 19.99,
-    redirectUrl: 'https://custom.com/success',
-    cancelUrl: 'https://custom.com/cancel',
-    metadata: { userId: '123' }
+    // optional:
+    description: 'product description',   // default: 'no description'
+    quantity: 1,                           // default: 1
+    currency: 'EUR',                       // default: 'EUR'
+    metadata: { userId: '123' },
+    redirectUrl: 'https://custom.com/ok', // default: https://domain.com/payments/coinbase/verify
+    cancelUrl: 'https://custom.com/no'    // default: https://domain.com/payments/cancel
 });
 
-// redirect to: charge.hostedUrl
+// redirect user to:
+charge.hostedUrl
+
+// result object:
+{
+    provider: 'coinbase',
+    type: 'charge',
+    hostedUrl: '...',
+    chargeId: '...',
+    chargeCode: '...',
+    amount: 19.99,
+    currency: 'EUR',
+    metadata: {},
+    rawResponse: {}
+}
+```
 
-// manually verify
+### Verify a charge manually
+
+```js
 const result = await payments.coinbase.verifyCharge(chargeCode);
 // result.status === 'COMPLETED'
 ```
@@ -146,7 +183,7 @@ const result = await payments.coinbase.verifyCharge(chargeCode);
 
 ## Routes
 
-dSyncPay automatically creates verification routes and redirect pages for handling payment returns to make the entire payment process as simple and straight forward as possible.
+dSyncPay automatically registers verification routes that handle payment returns from PayPal and Coinbase.
 
 ### Verification Routes
 
@@ -159,42 +196,38 @@ dSyncPay automatically creates verification routes and redirect pages for handli
 #### Coinbase
 
 - `GET /payments/coinbase/verify?code=xxx`
-- `POST /payments/webhook/coinbase` (if webhookSecret set)
+- `POST /payments/webhook/coinbase` (only registered if `webhookSecret` is set)
 - `GET /payments/cancel`
 
-### Auto-Generated Redirect Pages
+### Status Page
 
-The library automatically creates simple redirect pages at:
+After a payment is completed, failed, or cancelled, the user is redirected to a built-in status page at:
 
-- `GET /payment-success` - shown after successful payment
-- `GET /payment-error` - shown when payment fails
-- `GET /payment-cancelled` - shown when user cancels payment
-- `GET /subscription-success` - shown after successful subscription
-- `GET /subscription-error` - shown when subscription fails
+```
+GET /payments/payment-status.html?status=success&provider=paypal&amount=19.99&currency=EUR
+```
 
-You can customize these redirect URLs in the constructor with the `redirects` parameter.
+The `status` query param controls what is shown:
 
-### Usage Example
+| status      | description                       |
+| ----------- | --------------------------------- |
+| `success`   | payment or subscription completed |
+| `error`     | payment failed                    |
+| `cancelled` | user cancelled                    |
 
-```javascript
-const order = await payments.paypal.createOrder({
-    title: 'premium plan',
-    price: 19.99
-});
+Additional query params (`payment_id`, `provider`, `amount`, `currency`, `type`) are passed through automatically and displayed on the page.
 
-// redirect user to order.approvalUrl
-// paypal redirects back to /payments/paypal/verify?token=XXX
-// route automatically verifies and triggers onPaymentCompleted
-// then redirects to /payment-success
-```
+You can customize where users land before the status page using the `redirects` option in the constructor. These are intermediate routes that pass through query params and redirect to the status page.
 
-### Custom Configuration
+------
+
+## Custom Configuration
 
-```javascript
+```js
 const payments = new dSyncPay({
     app,
     domain: 'https://domain.com',
-    basePath: '/api/pay', // default is '/payments'
+    basePath: '/api/pay',   // default: '/payments'
     redirects: {
         success: '/custom/success',
         error: '/custom/error',
@@ -205,7 +238,24 @@ const payments = new dSyncPay({
     paypal: { ... }
 });
 
-// routes: /api/pay/paypal/verify, /api/pay/coinbase/verify, etc.
-// auto urls: https://domain.com/api/pay/paypal/verify
-// redirect pages: /custom/success, /custom/error, etc.
-```
+// verification routes: /api/pay/paypal/verify, /api/pay/coinbase/verify, etc.
+// auto-generated return urls: https://domain.com/api/pay/paypal/verify
+// status page: /api/pay/payment-status.html
+```
+
+------
+
+## Events
+
+All callbacks receive a data object with at minimum `provider`, `type`, `status`, `metadata`, and `rawResponse`.
+
+| event                     | trigger                               |
+| ------------------------- | ------------------------------------- |
+| `onPaymentCreated`        | order or charge was created           |
+| `onPaymentCompleted`      | payment verified as completed         |
+| `onPaymentFailed`         | payment failed or expired             |
+| `onPaymentCancelled`      | user cancelled payment                |
+| `onSubscriptionCreated`   | subscription was created              |
+| `onSubscriptionActivated` | subscription verified as active       |
+| `onSubscriptionCancelled` | subscription was cancelled            |
+| `onError`                 | internal error (auth, api call, etc.) |

package/index.mjs

@@ -1,4 +1,10 @@
 import crypto from "crypto";
+import path from "path";
+import { fileURLToPath } from "url";
+import fs from "fs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export default class dSyncPay {
     constructor({
@@ -30,6 +36,7 @@ export default class dSyncPay {
         this.domain = domain.endsWith('/') ? domain.slice(0, -1) : domain;
         this.basePath = basePath;
         this.redirects = redirects;
+        this.metadataCache = new Map();
 
         this.callbacks = {
             onPaymentCreated,
@@ -42,6 +49,9 @@ export default class dSyncPay {
             onError
         };
 
+        this.webPath = path.join(__dirname, "web");
+        if(!fs.existsSync(this.webPath)) throw new Error("missing web path");
+
         if (paypal) {
             if (!paypal.clientId) throw new Error("missing paypal.clientId");
             if (!paypal.clientSecret) throw new Error("missing paypal.clientSecret");
@@ -53,6 +63,11 @@ export default class dSyncPay {
             this.coinbase = new this.Coinbase(this, coinbase);
         }
 
+        // serve static files from web/ folder
+        this.app.get(`${this.basePath}/payment-status.html`, (req, res) => {
+            res.sendFile(path.join(__dirname, "web", "payment-status.html"));
+        });
+
         this.registerRoutes(basePath);
         this.registerRedirectRoutes();
     }
@@ -101,7 +116,7 @@ export default class dSyncPay {
 
         const fetchOptions = {
             method,
-            headers: {...headers}
+            headers: { ...headers }
         };
 
         if (auth) {
@@ -251,6 +266,12 @@ export default class dSyncPay {
                     rawResponse: response
                 };
 
+                this.parent.metadataCache.set(response.id, metadata);
+
+                setTimeout(() => {
+                    this.parent.metadataCache.delete(response.id);
+                }, 60 * 60 * 1000);
+
                 this.parent.emit('onPaymentCreated', result);
                 return result;
             } catch (error) {
@@ -306,6 +327,8 @@ export default class dSyncPay {
                     amount = parseFloat(purchaseUnit.amount.value);
                 }
 
+                const metadata = this.parent.metadataCache.get(orderId) || {};
+
                 const result = {
                     provider: 'paypal',
                     type: 'order',
@@ -314,6 +337,7 @@ export default class dSyncPay {
                     orderId: orderResponse.id,
                     amount: amount,
                     currency: purchaseUnit.payments?.captures?.[0]?.amount?.currency_code || purchaseUnit.amount?.currency_code || 'EUR',
+                    metadata,
                     rawResponse: orderResponse
                 };
 
@@ -324,6 +348,9 @@ export default class dSyncPay {
                 } else {
                     await this.parent.emit('onPaymentFailed', result);
                 }
+
+                this.parent.metadataCache.delete(orderId);
+
                 return result;
             } catch (error) {
                 this.parent.emit('onError', {
@@ -332,6 +359,9 @@ export default class dSyncPay {
                     orderId,
                     error: error.response || error.message
                 });
+
+                this.parent.metadataCache.delete(orderId);
+
                 throw error;
             }
         }
@@ -480,6 +510,12 @@ export default class dSyncPay {
                     rawResponse: response
                 };
 
+                this.parent.metadataCache.set(response.id, metadata);
+
+                setTimeout(() => {
+                    this.parent.metadataCache.delete(response.id);
+                }, 60 * 60 * 1000);
+
                 this.parent.emit('onSubscriptionCreated', result);
                 return result;
             } catch (error) {
@@ -505,6 +541,8 @@ export default class dSyncPay {
                     }
                 );
 
+                const metadata = this.parent.metadataCache.get(subscriptionId) || {};
+
                 const result = {
                     provider: 'paypal',
                     type: 'subscription',
@@ -512,15 +550,18 @@ export default class dSyncPay {
                     subscriptionId: response.id,
                     planId: response.plan_id,
                     customId: response.custom_id,
+                    metadata,
                     rawResponse: response
                 };
 
                 if (response.status === 'ACTIVE') {
-                    this.parent.emit('onSubscriptionActivated', result);
+                    await this.parent.emit('onSubscriptionActivated', result);
                 } else if (response.status === 'CANCELLED') {
-                    this.parent.emit('onSubscriptionCancelled', result);
+                    await this.parent.emit('onSubscriptionCancelled', result);
                 }
 
+                this.parent.metadataCache.delete(subscriptionId);
+
                 return result;
             } catch (error) {
                 this.parent.emit('onError', {
@@ -529,6 +570,9 @@ export default class dSyncPay {
                     subscriptionId,
                     error: error.response || error.message
                 });
+
+                this.parent.metadataCache.delete(subscriptionId);
+
                 throw error;
             }
         }
@@ -545,19 +589,24 @@ export default class dSyncPay {
                             "Content-Type": "application/json",
                             "Authorization": `Bearer ${accessToken}`
                         },
-                        body: {reason}
+                        body: { reason }
                     }
                 );
 
+                const metadata = this.parent.metadataCache.get(subscriptionId) || {};
+
                 const result = {
                     provider: 'paypal',
                     type: 'subscription',
                     subscriptionId,
                     status: 'CANCELLED',
-                    reason
+                    reason,
+                    metadata
                 };
 
-                this.parent.emit('onSubscriptionCancelled', result);
+                this.parent.metadataCache.delete(subscriptionId);
+
+                await this.parent.emit('onSubscriptionCancelled', result);
                 return result;
             } catch (error) {
                 this.parent.emit('onError', {
@@ -566,6 +615,9 @@ export default class dSyncPay {
                     subscriptionId,
                     error: error.response || error.message
                 });
+
+                this.parent.metadataCache.delete(subscriptionId);
+
                 throw error;
             }
         }
@@ -675,11 +727,11 @@ export default class dSyncPay {
                 };
 
                 if (latestStatus === 'COMPLETED') {
-                    this.parent.emit('onPaymentCompleted', result);
+                    await this.parent.emit('onPaymentCompleted', result);
                 } else if (latestStatus === 'CANCELED') {
-                    this.parent.emit('onPaymentCancelled', result);
+                    await this.parent.emit('onPaymentCancelled', result);
                 } else if (latestStatus === 'EXPIRED' || latestStatus === 'UNRESOLVED') {
-                    this.parent.emit('onPaymentFailed', result);
+                    await this.parent.emit('onPaymentFailed', result);
                 }
 
                 return result;
@@ -704,37 +756,48 @@ export default class dSyncPay {
 
     registerRedirectRoutes() {
         this.app.get(this.redirects.success, (req, res) => {
-            res.send('payment successful! thank you.');
+            const query = new URLSearchParams({ ...req.query, status: 'success' }).toString();
+            return res.redirect(`${this.basePath}/payment-status.html?${query}`);
         });
 
         this.app.get(this.redirects.error, (req, res) => {
-            res.send('payment failed. please try again.');
+            const query = new URLSearchParams({ ...req.query, status: 'error' }).toString();
+            return res.redirect(`${this.basePath}/payment-status.html?${query}`);
         });
 
         this.app.get(this.redirects.cancelled, (req, res) => {
-            res.send('payment cancelled.');
+            const query = new URLSearchParams({ ...req.query, status: 'cancelled' }).toString();
+            return res.redirect(`${this.basePath}/payment-status.html?${query}`);
         });
 
         this.app.get(this.redirects.subscriptionSuccess, (req, res) => {
-            res.send('subscription activated!');
+            const query = new URLSearchParams({ ...req.query, status: 'success', type: 'subscription' }).toString();
+            return res.redirect(`${this.basePath}/payment-status.html?${query}`);
         });
 
         this.app.get(this.redirects.subscriptionError, (req, res) => {
-            res.send('subscription failed.');
+            const query = new URLSearchParams({ ...req.query, status: 'error', type: 'subscription' }).toString();
+            return res.redirect(`${this.basePath}/payment-status.html?${query}`);
         });
     }
 
-    registerRoutes(basePath = '/payments') { 
+    registerRoutes(basePath = '/payments') {
         if (this.paypal) {
             this.app.get(`${basePath}/paypal/verify`, async (req, res) => {
                 try {
                     const orderId = req.query.token;
-                    if (!orderId) return res.status(400).json({ok: false, error: 'missing_token'});
+                    if (!orderId) return res.status(400).json({ ok: false, error: 'missing_token' });
 
                     const result = await this.paypal.verifyOrder(orderId);
 
                     if (result.status === 'COMPLETED') {
-                        return res.redirect(this.redirects.success);
+                        const query = new URLSearchParams({
+                            payment_id: orderId,
+                            provider: 'paypal',
+                            amount: result.amount,
+                            currency: result.currency
+                        }).toString();
+                        return res.redirect(`${this.redirects.success}?${query}`);
                     } else {
                         return res.redirect(this.redirects.error);
                     }
@@ -746,12 +809,16 @@ export default class dSyncPay {
             this.app.get(`${basePath}/paypal/subscription/verify`, async (req, res) => {
                 try {
                     const subscriptionId = req.query.subscription_id;
-                    if (!subscriptionId) return res.status(400).json({ok: false, error: 'missing_subscription_id'});
+                    if (!subscriptionId) return res.status(400).json({ ok: false, error: 'missing_subscription_id' });
 
                     const result = await this.paypal.verifySubscription(subscriptionId);
 
                     if (result.status === 'ACTIVE') {
-                        return res.redirect(this.redirects.subscriptionSuccess);
+                        const query = new URLSearchParams({
+                            payment_id: subscriptionId,
+                            provider: 'paypal'
+                        }).toString();
+                        return res.redirect(`${this.redirects.subscriptionSuccess}?${query}`);
                     } else {
                         return res.redirect(this.redirects.subscriptionError);
                     }
@@ -775,12 +842,18 @@ export default class dSyncPay {
             this.app.get(`${basePath}/coinbase/verify`, async (req, res) => {
                 try {
                     const chargeCode = req.query.code;
-                    if (!chargeCode) return res.status(400).json({ok: false, error: 'missing_code'});
+                    if (!chargeCode) return res.status(400).json({ ok: false, error: 'missing_code' });
 
                     const result = await this.coinbase.verifyCharge(chargeCode);
 
                     if (result.status === 'COMPLETED') {
-                        return res.redirect(this.redirects.success);
+                        const query = new URLSearchParams({
+                            payment_id: result.chargeId,
+                            provider: 'coinbase',
+                            amount: result.amount,
+                            currency: result.currency
+                        }).toString();
+                        return res.redirect(`${this.redirects.success}?${query}`);
                     } else {
                         return res.redirect(this.redirects.error);
                     }
@@ -799,7 +872,7 @@ export default class dSyncPay {
                             this.coinbase.config.webhookSecret
                         );
 
-                        if (!isValid) return res.status(401).json({ok: false, error: 'invalid_signature'});
+                        if (!isValid) return res.status(401).json({ ok: false, error: 'invalid_signature' });
 
                         const event = req.body;
 
@@ -808,9 +881,9 @@ export default class dSyncPay {
                             await this.coinbase.verifyCharge(chargeId);
                         }
 
-                        res.status(200).json({ok: true});
+                        res.status(200).json({ ok: true });
                     } catch (error) {
-                        res.status(500).json({ok: false, error: 'webhook_error'});
+                        res.status(500).json({ ok: false, error: 'webhook_error' });
                     }
                 });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackthedev/dsync-pay",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "As another part of the dSync library family this library is responsible for payment handling currently supporting PayPal and Coinbase Crypto payments. Its works independently and without any percentage cuts by using your own API keys.",
   "homepage": "https://github.com/NETWORK-Z-Dev/dSyncPay#readme",
   "bugs": {

package/web/payment-status.html

@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Payment Status</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+    <style>
+        *, *::before, *::after {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        :root {
+            --bg: #0a0a0a;
+            --surface: #101010;
+            --border: #1c1c1c;
+            --border-bright: #252525;
+            --text: #d8d8d8;
+            --text-dim: #555;
+            --text-dimmer: #2e2e2e;
+            --accent: #00e676;
+            --accent-glow: rgba(0, 230, 118, 0.12);
+        }
+
+        html, body { height: 100%; }
+
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'IBM Plex Sans', sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background-image:
+                    linear-gradient(var(--border) 1px, transparent 1px),
+                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
+            background-size: 40px 40px;
+            opacity: 0.45;
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        body::after {
+            content: '';
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 700px;
+            height: 700px;
+            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
+            pointer-events: none;
+            z-index: 0;
+            animation: glow-pulse 5s ease-in-out infinite;
+        }
+
+        @keyframes glow-pulse {
+            0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
+            50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
+        }
+
+        /* error/cancelled glow override */
+        body.status-error::after {
+            background: radial-gradient(circle, rgba(255, 82, 82, 0.1) 0%, transparent 65%);
+        }
+        body.status-cancelled::after {
+            background: radial-gradient(circle, rgba(255, 193, 7, 0.08) 0%, transparent 65%);
+        }
+
+        .container {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            max-width: 460px;
+            padding: 0 24px;
+            animation: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+        }
+
+        @keyframes fade-up {
+            from { opacity: 0; transform: translateY(20px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+
+        .card {
+            background: var(--surface);
+            border: 1px solid var(--border-bright);
+            border-radius: 12px;
+            padding: 36px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--accent), transparent);
+            opacity: 0.5;
+            transition: background 0.3s;
+        }
+
+        .card.status-error::before {
+            background: linear-gradient(90deg, transparent, #ff5252, transparent);
+        }
+        .card.status-cancelled::before {
+            background: linear-gradient(90deg, transparent, #ffc107, transparent);
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 8px;
+        }
+
+        .icon-svg {
+            flex-shrink: 0;
+            width: 22px;
+            height: 22px;
+        }
+
+        /* success */
+        .check-circle {
+            fill: none;
+            stroke: var(--accent);
+            stroke-width: 1.5;
+            stroke-dasharray: 69;
+            stroke-dashoffset: 69;
+            animation: draw-circle 0.45s ease 0.1s forwards;
+        }
+        .check-tick {
+            fill: none;
+            stroke: var(--accent);
+            stroke-width: 1.8;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-dasharray: 16;
+            stroke-dashoffset: 16;
+            animation: draw-tick 0.3s ease 0.45s forwards;
+        }
+        @keyframes draw-circle { to { stroke-dashoffset: 0; } }
+        @keyframes draw-tick   { to { stroke-dashoffset: 0; } }
+
+        /* error */
+        .error-circle {
+            fill: none;
+            stroke: #ff5252;
+            stroke-width: 1.5;
+            stroke-dasharray: 69;
+            stroke-dashoffset: 69;
+            animation: draw-circle 0.45s ease 0.1s forwards;
+        }
+        .error-x {
+            stroke: #ff5252;
+            stroke-width: 1.8;
+            stroke-linecap: round;
+            stroke-dasharray: 20;
+            stroke-dashoffset: 20;
+            animation: draw-tick 0.3s ease 0.45s forwards;
+        }
+
+        /* cancelled */
+        .cancelled-circle {
+            fill: none;
+            stroke: #ffc107;
+            stroke-width: 1.5;
+            stroke-dasharray: 69;
+            stroke-dashoffset: 69;
+            animation: draw-circle 0.45s ease 0.1s forwards;
+        }
+        .cancelled-line {
+            stroke: #ffc107;
+            stroke-width: 1.8;
+            stroke-linecap: round;
+            stroke-dasharray: 12;
+            stroke-dashoffset: 12;
+            animation: draw-tick 0.3s ease 0.45s forwards;
+        }
+
+        h1 {
+            font-size: 20px;
+            font-weight: 500;
+            letter-spacing: -0.2px;
+            color: var(--text);
+            line-height: 1;
+        }
+
+        .subtitle {
+            font-size: 13px;
+            color: var(--text-dim);
+            font-weight: 300;
+            margin-bottom: 28px;
+            margin-top: 6px;
+            padding-left: 34px;
+            line-height: 1.5;
+        }
+
+        .details {
+            display: flex;
+            flex-direction: column;
+            gap: 1px;
+            background: var(--border);
+            border-radius: 8px;
+            overflow: hidden;
+            animation: fade-up 0.4s ease 0.25s both;
+        }
+
+        .detail-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 11px 14px;
+            background: var(--bg);
+            gap: 16px;
+        }
+
+        .detail-label {
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 11px;
+            color: var(--text-dimmer);
+            text-transform: uppercase;
+            letter-spacing: 0.07em;
+            white-space: nowrap;
+        }
+
+        .detail-value {
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 12px;
+            color: var(--text-dim);
+            text-align: right;
+            word-break: break-all;
+        }
+
+        .detail-value.accent        { color: var(--accent); }
+        .detail-value.accent-error  { color: #ff5252; }
+        .detail-value.accent-warn   { color: #ffc107; }
+
+        .status-wrap {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 12px;
+            color: var(--text-dim);
+        }
+
+        .status-dot {
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background: var(--accent);
+            flex-shrink: 0;
+            animation: dot-blink 2.5s ease-in-out infinite;
+        }
+        .status-dot.error     { background: #ff5252; animation: none; }
+        .status-dot.cancelled { background: #ffc107; animation: none; }
+
+        @keyframes dot-blink {
+            0%, 100% { opacity: 1; }
+            50%       { opacity: 0.25; }
+        }
+
+        .hidden { display: none; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="card" id="card">
+
+        <div class="header">
+            <!-- success -->
+            <svg id="icon-success" class="icon-svg" viewBox="0 0 22 22">
+                <circle class="check-circle" cx="11" cy="11" r="10"/>
+                <polyline class="check-tick" points="6.5,11 9.5,14 15.5,8"/>
+            </svg>
+            <!-- error -->
+            <svg id="icon-error" class="icon-svg hidden" viewBox="0 0 22 22">
+                <circle class="error-circle" cx="11" cy="11" r="10"/>
+                <line class="error-x" x1="7.5" y1="7.5" x2="14.5" y2="14.5"/>
+                <line class="error-x" x1="14.5" y1="7.5" x2="7.5" y2="14.5"/>
+            </svg>
+            <!-- cancelled -->
+            <svg id="icon-cancelled" class="icon-svg hidden" viewBox="0 0 22 22">
+                <circle class="cancelled-circle" cx="11" cy="11" r="10"/>
+                <line class="cancelled-line" x1="7" y1="11" x2="15" y2="11"/>
+            </svg>
+            <h1 id="title">Payment Successful</h1>
+        </div>
+
+        <p class="subtitle" id="subtitle">Your order has been confirmed.</p>
+
+        <div class="details">
+            <div class="detail-row" id="row-payment-id">
+                <span class="detail-label">Payment ID</span>
+                <span class="detail-value accent" id="val-payment-id">—</span>
+            </div>
+            <div class="detail-row" id="row-charge-code">
+                <span class="detail-label">Charge Code</span>
+                <span class="detail-value accent" id="val-charge-code">—</span>
+            </div>
+            <div class="detail-row" id="row-provider">
+                <span class="detail-label">Provider</span>
+                <span class="detail-value" id="val-provider">—</span>
+            </div>
+            <div class="detail-row" id="row-order-id">
+                <span class="detail-label">Order ID</span>
+                <span class="detail-value" id="val-order-id">—</span>
+            </div>
+            <div class="detail-row" id="row-amount">
+                <span class="detail-label">Amount</span>
+                <span class="detail-value accent" id="val-amount">—</span>
+            </div>
+            <div class="detail-row" id="row-type">
+                <span class="detail-label">Type</span>
+                <span class="detail-value" id="val-type">—</span>
+            </div>
+            <div class="detail-row">
+                <span class="detail-label">Status</span>
+                <span class="status-wrap">
+                    <span class="status-dot" id="status-dot"></span>
+                    <span id="status-text">Confirmed</span>
+                </span>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<script>
+    const params   = new URLSearchParams(window.location.search);
+    const status   = params.get('status') || 'success';
+    const provider = params.get('provider') || '';
+    const type     = params.get('type');
+
+    // paypal params
+    const paymentId = params.get('payment_id') || params.get('paymentId') || params.get('token');
+    const orderId   = params.get('order_id')   || params.get('orderId');
+    const amount    = params.get('amount');
+    const currency  = params.get('currency');
+
+    // coinbase params
+    const chargeCode = params.get('charge_code') || params.get('chargeCode');
+    const chargeId   = params.get('charge_id')   || params.get('chargeId');
+
+    const card       = document.getElementById('card');
+    const title      = document.getElementById('title');
+    const subtitle   = document.getElementById('subtitle');
+    const statusDot  = document.getElementById('status-dot');
+    const statusText = document.getElementById('status-text');
+
+    const configs = {
+        success: {
+            icon: 'success',
+            title: type === 'subscription' ? 'Subscription Activated' : 'Payment Successful',
+            subtitle: type === 'subscription' ? 'Your subscription is now active.' : 'Your order has been confirmed.',
+            statusLabel: type === 'subscription' ? 'Active' : 'Confirmed',
+            dotClass: '',
+            accentClass: 'accent',
+            cardClass: ''
+        },
+        error: {
+            icon: 'error',
+            title: type === 'subscription' ? 'Subscription Failed' : 'Payment Failed',
+            subtitle: 'Something went wrong. Please try again.',
+            statusLabel: 'Failed',
+            dotClass: 'error',
+            accentClass: 'accent-error',
+            cardClass: 'status-error'
+        },
+        cancelled: {
+            icon: 'cancelled',
+            title: 'Payment Cancelled',
+            subtitle: 'The payment was cancelled.',
+            statusLabel: 'Cancelled',
+            dotClass: 'cancelled',
+            accentClass: 'accent-warn',
+            cardClass: 'status-cancelled'
+        }
+    };
+
+    const cfg = configs[status] || configs.success;
+
+    // apply status styles
+    document.body.classList.add(`status-${status}`);
+    if (cfg.cardClass) card.classList.add(cfg.cardClass);
+
+    document.getElementById('icon-success').classList.toggle('hidden', cfg.icon !== 'success');
+    document.getElementById('icon-error').classList.toggle('hidden', cfg.icon !== 'error');
+    document.getElementById('icon-cancelled').classList.toggle('hidden', cfg.icon !== 'cancelled');
+
+    title.textContent    = cfg.title;
+    subtitle.textContent = cfg.subtitle;
+    statusDot.className  = 'status-dot ' + cfg.dotClass;
+    statusText.textContent = cfg.statusLabel;
+
+    // update accent color on amount + payment id
+    document.getElementById('val-payment-id').className = 'detail-value ' + cfg.accentClass;
+    document.getElementById('val-amount').className     = 'detail-value ' + cfg.accentClass;
+    document.getElementById('val-charge-code').className = 'detail-value ' + cfg.accentClass;
+
+    function setRow(rowId, valId, value) {
+        if (value) {
+            document.getElementById(valId).textContent = value;
+        } else {
+            const row = document.getElementById(rowId);
+            if (row) row.classList.add('hidden');
+        }
+    }
+
+    setRow('row-payment-id',  'val-payment-id',  paymentId || chargeId);
+    setRow('row-charge-code', 'val-charge-code', chargeCode);
+    setRow('row-provider',    'val-provider',    provider ? provider.toUpperCase() : null);
+    setRow('row-order-id',    'val-order-id',    orderId);
+    setRow('row-amount',      'val-amount',      amount ? `${amount} ${currency || ''}`.trim() : null);
+    setRow('row-type',        'val-type',        type ? type.charAt(0).toUpperCase() + type.slice(1) : null);
+</script>
+</body>
+</html>