Integration
Client SDK Integration
Accept payments on the client side using redirect, iframe embed, inline rendering, or payment link embed.
Installation
Package manager (Node.js / server-side)
# npmnpm install @paymenthooks/sdk# yarnyarn add @paymenthooks/sdk# pnpmpnpm add @paymenthooks/sdk
// Usage in Node.js / server-sideimport { PaymentHooks } from '@paymenthooks/sdk';const ph = new PaymentHooks({ apiKey: 'sk_live_...' });const payment = await ph.payments.create({amount: 2000, currency: 'usd'});
View on npm: @paymenthooks/sdk
CDN script tag (browser / client-side)
// unpkg<script src="https://unpkg.com/@paymenthooks/sdk/dist/browser.global.js"></script>// jsDelivr<script src="https://cdn.jsdelivr.net/npm/@paymenthooks/sdk/dist/browser.global.js"></script>// InitializePaymentHooks.init({ publishableKey: "pk_live_..." });
Use the CDN script for browser-only integrations where you do not have a build step.
ES module import (browser with bundler)
import { init, checkout, renderCheckout } from '@paymenthooks/sdk/browser';init({ publishableKey: 'pk_live_...' });
Choose your integration
| Method | Effort | UX | Best for |
|---|---|---|---|
| Redirect | Low | Leaves your site | Quick integration |
| Iframe | Low | Stays on site | Embedded + hosted security |
| Inline | Medium | Full DOM control | Custom callbacks |
| Payment link | Low | Standalone/embed | No-code pages |
Redirect Checkout
Redirect the customer to a PaymentHooks-hosted checkout page. After payment, they return to your success URL.
When to use: Maximum simplicity. Trust the hosted UI.
PaymentHooks.init({ publishableKey: "pk_live_..." });
PaymentHooks.checkout({ sessionId: "cs_abc123" });
// Optional: open in popup
PaymentHooks.checkout({ sessionId: "cs_abc123", newWindow: true });Iframe Embed
Embed checkout inside an iframe on your page. Customer never leaves your domain visually.
When to use: Hosted security with embedded feel.
<div id="payment-form"></div>
<script>
PaymentHooks.init({ publishableKey: "pk_live_..." });
PaymentHooks.renderCheckout({
sessionId: "cs_abc123",
container: "#payment-form"
});
</script>Direct DOM Render
Render the payment form directly into your DOM. Full control with onSuccess and onError callbacks.
When to use: Custom UX, callback-driven payment flows.
<div id="inline-pay"></div>
<script>
PaymentHooks.init({ publishableKey: "pk_live_..." });
PaymentHooks.renderInline({
sessionId: "cs_abc123",
container: "#inline-pay",
onSuccess: function(data) {
console.log("Paid:", data.paymentId);
},
onError: function(err) {
console.error(err.message);
}
});
</script>Payment Link Embed
Embed a payment link form on your page via iframe. No checkout session needed.
When to use: Reusable links on landing pages or marketing sites.
<div id="pay-widget"></div>
<script>
PaymentHooks.init({ publishableKey: "pk_live_..." });
PaymentHooks.paymentLink({
slug: "pro-plan-monthly",
container: "#pay-widget"
});
</script>SDK API reference
PaymentHooks.init({ publishableKey, baseUrl? })
Initialize SDK. baseUrl auto-detected from script source.
PaymentHooks.checkout({ sessionId, newWindow? })
Redirect to hosted checkout or open popup.
PaymentHooks.renderCheckout({ sessionId, container })
Embed checkout in an iframe.
PaymentHooks.renderInline({ sessionId, container, onSuccess?, onError? })
Render form directly in DOM.
PaymentHooks.paymentLink({ slug, container })
Embed payment link form via iframe.
Security
Publishable keys only
pk_live_ keys are safe for client-side. Never expose sk_ keys in the browser.
Card data isolation
In redirect/iframe modes, cards are entered on PaymentHooks pages. In inline mode, the SDK posts directly to the API.
PCI compliance
Using the SDK keeps card data out of your server, helping maintain PCI-DSS compliance.