Developers
Embedded widget
The customer pays without leaving your domain. You create the invoice through the API and render the CryBit payment form on your own page.
1. Create an invoice
Use the same POST /api/v1/payments. The response always contains confirmation.confirmation_token, which equals the invoice uuid. The confirmation field in the request is optional.
2. Load the script and add a container
HTML
<script src="https://pay.crybit.net/widget.js"></script>
<div id="payment-form"></div>3. Render the form
JavaScript
const checkout = new CryBitCheckout({
confirmation_token: 'INVOICE-UUID',
return_url: 'https://merchant.example/thanks',
lang: 'en',
error_callback: (err) => console.log(err),
})
checkout.render('payment-form').then(() => { /* the form is shown */ })
checkout.on('success', () => { /* status paid: confirm the order by webhook or GET */ })
checkout.on('fail', () => { /* expired, cancelled or refunded */ })
checkout.on('complete', () => checkout.destroy())Modal window
If there is no container on the page, open the widget over the site with customization: { modal: true } (or modal: true) and call checkout.render() without arguments.
Options and events
| Option | Meaning |
|---|---|
confirmation_token | Required. The invoice uuid (aliases: uuid, invoice_uuid). |
return_url | Where the customer goes after payment. |
lang | Interface language; otherwise the browser language. |
modal / customization.modal | true for a pop-up instead of a container. |
error_callback, success_callback | Called on an error (no token, no container) and when the status becomes paid. |
Events: ready, status, success, fail, complete, close, error. Methods: render(id), on(event, fn), destroy().
Confirm the order by webhook or by reading the status. The widget event is only for the user interface.
FAQ
Can I test the widget?
Yes. In a test merchant the widget shows a button to mark the invoice as paid and the balance is not credited.