Checkout Embed
checkout.js turns any element carrying the brykto-checkout-button class into a payment button. On click it creates a payment server-side and opens the pay page in a new tab.
No modal, no iframe, no SDK.
Usage
<script src="https://bryktopay.com/static/js/checkout.js" defer></script>
<button class="brykto-checkout-button" data-button-id="bky_btn_xxxxxxxxxxxxxxxx">Pay now</button>Both parts are load-bearing
The script binds only to elements with class="brykto-checkout-button". Without the class, nothing happens on click and no error is shown. This is the single most common integration mistake.
One <script> tag covers every button on the page. A MutationObserver picks up buttons added later, so anything your own JavaScript renders is bound automatically.
Attributes
| Attribute | Required | Description |
|---|---|---|
data-button-id |
Yes | The bky_btn_... ID of a Checkout Button created in the dashboard |
data-order-id |
No | Your own reference, returned on the webhook |
That is the entire surface. Everything else about the payment lives on the button record in the dashboard.
<button class="brykto-checkout-button"
data-button-id="bky_btn_xxxxxxxxxxxxxxxx"
data-order-id="1042">Pay now</button>Clicking calls POST /v1/public/checkout/button-session with nothing but the button ID and your optional order reference.
The amount is fixed and server-side
Amount, currency, description and success URL are all stored on the button when you create it in the dashboard. They are read server-side at click time.
There is no way to set an amount from the page
A customer cannot change the price by editing your HTML, because the price was never in your HTML. A button charges exactly one amount.
If your amount varies per order, the embed is the wrong tool. Create the payment server-side with the Payment Links API instead.
Editing a button in the dashboard takes effect immediately, on every page already carrying it. Deleting one stops it working straight away.
Expiry
Payments created by a button click expire 30 minutes later.
The success redirect
If the button has a success URL, the pay page navigates there about two seconds after the payment confirms.
The redirect is not proof of payment
It carries no signature and no token, and anyone can type the URL. Render your success page from your own database, updated by the webhook. Never unlock anything because a browser arrived somewhere.
Because the success URL is fixed on the button, it is the same for every customer. There is no per-customer token in it, so it cannot identify who just paid. Use data-order-id plus the webhook for that.
Leave the success URL unset and the customer stays on the pay page, where they are offered an email receipt. Setting one suppresses that offer.
Styling
The script injects its own stylesheet for .brykto-checkout-button and prepends a Brykto icon as a <span class="bky-icon"> child. Override the class in your own CSS to match your site.
Errors
Failures are logged to the browser console with a [Brykto] prefix and shown to the visitor as an alert.
| Cause | What the visitor sees |
|---|---|
| Button ID unknown or deactivated | Button not found or inactive |
| Merchant has not finished onboarding | Merchant setup is not complete |
| Free plan monthly cap reached | Merchant payment limit reached |
| Payments paused platform-wide | Payments are temporarily unavailable |
A button with no data-button-id logs a console error and does nothing.
Next steps
- E-commerce checkout - handling an amount that changes per order
- Webhooks - how to actually confirm a payment