Embeddable Widgets

Drop EsperWorks invoice payment and contract signing directly into your website or app using a simple iframe. No redirect required, your users stay on your page.

Widgets use the same public signing tokens as the full EsperWorks pages. Get the token from the payment_url returned when creating an invoice, or from the contract object.

Invoice payment widget

Shows the invoice summary and a Pay button. On click, redirects the top-level window to the payment gateway (Paystack / Flutterwave / Mobile Money).

<!-- EsperWorks Invoice Payment Widget -->
<iframe
  src="https://tryesperworks.com/embed/invoice/INVOICE_TOKEN"
  width="380"
  height="260"
  frameborder="0"
  style="border-radius: 16px; border: 1px solid #e5e7eb;"
  title="Pay Invoice"
></iframe>

Contract signing widget

Shows the contract title and a signature input. The client types their name and clicks Sign. No redirect, signing completes inline.

<!-- EsperWorks Contract Signing Widget -->
<iframe
  src="https://tryesperworks.com/embed/contract/CONTRACT_TOKEN"
  width="380"
  height="300"
  frameborder="0"
  style="border-radius: 16px; border: 1px solid #e5e7eb;"
  title="Sign Contract"
></iframe>

Dynamic embedding (JavaScript)

Create an invoice via the API, then immediately embed the payment widget on your page.

// Dynamically embed after creating an invoice via API
const { invoice, payment_url } = await createInvoice({ ... });

// Extract the token from the payment_url
const token = payment_url.split('/').pop();

const iframe = document.createElement('iframe');
iframe.src = `https://tryesperworks.com/embed/invoice/${token}`;
iframe.width = '380';
iframe.height = '260';
iframe.style.cssText = 'border-radius:16px;border:1px solid #e5e7eb;';
document.getElementById('payment-container').appendChild(iframe);

Widget URLs

Widget	URL
Invoice payment	`https://tryesperworks.com/embed/invoice/:token`
Contract signing	`https://tryesperworks.com/embed/contract/:token`

Recommended iframe dimensions

Widget	Width	Height
Invoice payment	360–420px	240–280px
Contract signing	360–420px	280–340px