@getblitz/client
Advanced tools
Embeddable payment SDK for GetBlitz Payment Gateway - Self-hosted SEPA instant transfers across Europe
Embeddable payment SDK for GetBlitz Payment Gateway — accept SEPA Instant Transfers across Europe with a lightweight, customizable widget.
npm install @getblitz/client
# or
pnpm add @getblitz/client
# or
yarn add @getblitz/client
<script src="https://unpkg.com/@getblitz/client/dist/getblitz.umd.cjs"></script>
First, create a payment session via the GetBlitz API:
curl -X POST https://pay.yourdomain.com/api/v1/challenge \
-H "Authorization: Bearer sk_live_..." \
-H "Content-Type: application/json" \
-d '{
"amount": 2500,
"currency": "EUR",
"merchantReferenceId": "order-456"
}'
Response:
{
"sessionId": "550e8400-e29b-41d4-a716-446655440000",
"clientToken": "ey...",
"referenceId": "GB-A9F3B2C1",
"merchantReferenceId": "order-456",
"paymentUrl": "https://pay.yourdomain.com/pay/550e8400-e29b-41d4-a716-446655440000",
"expiresAt": "2024-01-15T12:15:00.000Z"
}
Tip: Use
merchantReferenceIdto link payments to your own system (e.g., order IDs). It must be unique per organization.
import { GetBlitz } from "@getblitz/client";
const payment = new GetBlitz({
sessionId: "550e8400-e29b-41d4-a716-446655440000",
clientToken: "ey...", // From Create Challenge response
apiUrl: "https://pay.yourdomain.com",
wssUrl: "wss://wss.yourdomain.com",
theme: "dark",
});
// Mount the widget to a DOM element
await payment.mount("#payment-container");
// Handle payment events
payment
.on("onSuccess", (token) => {
console.log("Payment successful! Token:", token);
// Redirect to success page or verify payment server-side
window.location.href = `/order/success?token=${token}`;
})
.on("onError", (error) => {
console.error("Payment failed:", error.message);
})
.on("onExpired", () => {
console.log("Payment session expired");
// Optionally create a new session
});
<!DOCTYPE html>
<html>
<head>
<title>Checkout</title>
</head>
<body>
<div id="payment-container"></div>
<script src="https://unpkg.com/@getblitz/client/dist/getblitz.umd.cjs"></script>
<script>
const payment = new GetBlitz({
sessionId: "550e8400-e29b-41d4-a716-446655440000",
clientToken: "ey...",
apiUrl: "https://pay.yourdomain.com",
wssUrl: "wss://wss.yourdomain.com",
});
payment.mount("#payment-container");
payment
.on("onSuccess", function (token) {
alert("Payment successful!");
})
.on("onError", function (error) {
alert("Payment failed: " + error.message);
});
</script>
</body>
</html>
new GetBlitz(config: GetBlitzClientConfig)
| Option | Type | Required | Description |
|---|---|---|---|
sessionId | string | ✅ | Payment session UUID |
clientToken | string | ✅ | Auth token from Challenge response |
apiUrl | string | ❌ | API base URL (defaults to current origin) |
wssUrl | string | ❌ | WebSocket URL (defaults to current origin) |
apiKey | string | ❌ | Public API key (pklive...) |
theme | "light" | "dark" | "auto" | ❌ | Widget theme (default: system preference) |
locale | string | ❌ | Locale for i18n (e.g., "de-DE") |
mount(selector: string): Promise<void>Mounts the payment widget to the specified DOM element. The widget displays:
await payment.mount("#payment-container");
on<K>(event: K, callback: Callback): thisRegisters an event callback. Returns this for method chaining.
payment
.on("onSuccess", (token) => {
/* ... */
})
.on("onError", (error) => {
/* ... */
})
.on("onExpired", () => {
/* ... */
})
.on("onCancel", () => {
/* ... */
});
destroy(): voidCleans up the widget, disconnects WebSocket, and removes event listeners.
payment.destroy();
| Event | Callback Signature | Description |
|---|---|---|
onSuccess | (token: string) => void | Payment was confirmed successfully |
onError | (error: Error) => void | Payment failed |
onExpired | () => void | Payment session expired |
onCancel | () => void | User cancelled the payment |
┌─────────────┐ ┌──────────────┐ ┌───────────────┐
│ Merchant │ │ GetBlitz │ │ Customer's │
│ Website │ │ Widget │ │ Bank App │
└──────┬──────┘ └──────┬───────┘ └───────┬───────┘
│ │ │
│ 1. Create session │ │
│───────────────────>│ │
│ │ │
│ 2. Mount widget │ │
│───────────────────>│ │
│ │ │
│ │ 3. Display QR code │
│ │─────────────────────>│
│ │ │
│ │ 4. Scan & pay │
│ │<─────────────────────│
│ │ │
│ 5. onSuccess(token) │
│<───────────────────│ │
│ │ │
onSuccess callback receives the payment tokenWhen self-hosting GetBlitz, configure the SDK to point to your infrastructure:
const payment = new GetBlitz({
sessionId: "...",
clientToken: "ey...",
apiUrl: "https://pay.yourdomain.com", // Your Next.js app
wssUrl: "wss://wss.yourdomain.com", // Your WebSocket server
});
For single-origin deployments where the API and WebSocket server run on the same domain, you can omit these URLs:
const payment = new GetBlitz({
sessionId: "...",
clientToken: "ey...",
// Defaults to window.location.origin
});
Full TypeScript support is included. Import types as needed:
import type {
GetBlitzClientConfig,
GetBlitzEventCallbacks,
PaymentSessionDetails,
} from "@getblitz/client";
For advanced type needs, you can also import from the shared types package:
import type { PaymentEvent } from "@getblitz/shared-types";
Requires fetch, WebSocket, and ES2020 features.
@getblitz/shared-types — Shared TypeScript types and Zod schemasMIT © GetBlitz
FAQs
Embeddable payment SDK for GetBlitz Payment Gateway - Self-hosted SEPA instant transfers across Europe
The npm package @getblitz/client receives a total of 8 weekly downloads. As such, @getblitz/client popularity was classified as not popular.
We found that @getblitz/client demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.