Monorepo structure for GoLightPay front-end SDK packages.
- @golightpay/core - Core SDK with framework-agnostic payment logic
- @golightpay/wallet - Wallet connection utilities (EVM and Solana)
- @golightpay/web - Web Components widget (LitElement based)
pnpm installpnpm buildpnpm build:core # Build @golightpay/core
pnpm build:wallet # Build @golightpay/wallet
pnpm build:web # Build @golightpay/webpnpm dev # Start dev server for @golightpay/webjs-sdk/
├── packages/
│ ├── core/ # @golightpay/core - Core logic
│ │ ├── src/
│ │ ├── dist/
│ │ └── package.json
│ ├── wallet/ # @golightpay/wallet - Wallet utilities
│ │ ├── src/
│ │ ├── dist/
│ │ └── package.json
│ └── web/ # @golightpay/web - Web Components
│ ├── src/
│ ├── dist/
│ ├── examples/
│ └── package.json
├── package.json # Root workspace config
└── pnpm-workspace.yaml
import { GoLightPayController, createGoLightPayController } from "@golightpay/core";import { createWagmiConfig, sendEvmTransaction, getSolanaCluster, sendSolanaTransaction } from "@golightpay/wallet";
import type { WalletConnectedEvent, WagmiConfig } from "@golightpay/wallet";The @golightpay/web package provides a ready-to-use Web Component that you can embed directly into your HTML pages.
Installation:
<!-- Option 1: ES Module (Recommended) -->
<script type="module">
import "https://cdn.golightpay.com/golightpay-widget.es.js";
</script>
<!-- Option 2: UMD Build -->
<script src="https://cdn.golightpay.com/golightpay-widget.umd.js"></script>
<!-- Option 3: NPM Package -->
<script type="module">
import "@golightpay/web";
</script>1. Invoice Payment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Invoice Payment</title>
</head>
<body>
<golightpay-widget invoice-id="your-invoice-id"></golightpay-widget>
<script type="module">
import "@golightpay/web";
const widget = document.querySelector("golightpay-widget");
widget.addEventListener("payment-success", (e) => {
console.log("Payment successful:", e.detail);
// e.detail contains: { signature, network, token }
});
</script>
</body>
</html>2. Payment Link
<golightpay-widget payment-link-id="your-payment-link-id"></golightpay-widget>
<script type="module">
import "@golightpay/web";
</script>3. Custom Theme
<!-- Using theme attribute -->
<golightpay-widget invoice-id="your-invoice-id" theme="purple"></golightpay-widget>
<!-- Available themes: green (default), blue, purple, orange, red, teal, pink, gray -->4. Custom CSS Variables
<style>
:root {
--golightpays-primary: #9333ea;
--golightpays-primary-foreground: #ffffff;
--golightpays-border: #e5e7eb;
}
</style>
<golightpay-widget invoice-id="your-invoice-id"></golightpay-widget>5. Multi-language Support
<golightpay-widget invoice-id="your-invoice-id" locale="zh"></golightpay-widget>
<!-- Supported languages: en, zh -->6. Testnet Mode
<golightpay-widget invoice-id="test-invoice-id" use-testnet></golightpay-widget>7. Event Handling
<golightpay-widget invoice-id="your-invoice-id"></golightpay-widget>
<script type="module">
import "@golightpay/web";
const widget = document.querySelector("golightpay-widget");
// Payment success event
widget.addEventListener("payment-success", (e) => {
const { signature, network, token } = e.detail;
console.log("Payment successful:", signature);
alert(`Payment successful! Transaction: ${signature}`);
});
// Payment error event
widget.addEventListener("payment-error", (e) => {
console.error("Payment error:", e.detail);
alert("Payment failed. Please try again.");
});
</script>8. Complete Example with All Features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GoLightPay Widget</title>
<style>
:root {
--golightpays-primary: #9333ea;
--golightpays-primary-foreground: #ffffff;
}
body {
font-family: system-ui, sans-serif;
max-width: 640px;
margin: 2rem auto;
padding: 1rem;
}
</style>
</head>
<body>
<h1>Payment Widget</h1>
<golightpay-widget invoice-id="your-invoice-id" theme="purple" locale="en" qr-mode="address"></golightpay-widget>
<script type="module">
import "@golightpay/web";
const widget = document.querySelector("golightpay-widget");
widget.addEventListener("payment-success", (e) => {
console.log("Payment success:", e.detail);
// Handle successful payment
});
widget.addEventListener("payment-error", (e) => {
console.error("Payment error:", e.detail);
// Handle payment error
});
</script>
</body>
</html>| Attribute | Type | Required | Description |
|---|---|---|---|
invoice-id |
string | Yes* | Invoice ID to display |
payment-link-id |
string | Yes* | Payment link ID to display |
base-url |
string | No | API base URL (default: https://api.golightpay.com) |
use-testnet |
boolean | No | Enable testnet mode (default: false) |
locale |
string | No | Language code: en, zh, etc. (default: auto-detect) |
qr-mode |
string | No | QR code mode: address, eip681, or all (default: address) |
theme |
string | No | Theme name: green (default), blue, purple, orange, red, teal, pink, gray |
* Either invoice-id or payment-link-id must be provided.
payment-success: Fired when payment is successfully completed- Event detail:
{ signature, network, token }
- Event detail:
payment-error: Fired when payment fails- Event detail: Error information
For more examples, see the examples directory.
@golightpay/vue- Vue 3 component@golightpay/react- React component