Embed checkout on your website

From invoice to checkout#

Create an invoice in /account#links and immediately receive checkoutUrl. Open /account#widget, paste the link and choose a modal, inline block or redirect. Keys and webhooks are available in neighbouring account sections.

The builder preview always uses a demo order without charging. The generated widget code retains your live link, whose terms come from the saved server invoice.

For a new invoice in the interface, USD offers cards and Alipay; RUB offers SBP; USDT offers crypto. The API can also save USD + crypto for compatibility, but its live crypto payment is blocked with crypto_requires_usdt. USD and USDT are distinct, with no automatic conversion or assumed 1:1 rate. A crypto payment requires a separate USDT invoice.

A button with a normal link fallback#

This example opens a demo without charging money. Replace both URL values with checkoutUrl from your invoice response. Load the script from the same Kevmi origin as the checkout URL.

The href opens checkout when JavaScript is unavailable. data-kevmi-label gives the iframe an accessible name. Include the script once per page.

<script src="https://kevmi.maxeevmax1.chatgpt.site/widgets/kevmi.js" defer></script>
<a href="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
   data-kevmi-checkout="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
   data-kevmi-mode="modal"
   data-kevmi-label="Order checkout">Pay securely</a>

Three ways to open checkout#

Use a container such as div for inline mode and replace CHECKOUT_URL_FROM_API with a real URL. The frame adapts to its container width; checkout messages can resize its height within a bounded range.

The modal closes with its button, Escape or a backdrop click. Focus returns to the original trigger after closing. Reduced-motion settings shorten the transition.

<div data-kevmi-checkout="CHECKOUT_URL_FROM_API"
     data-kevmi-mode="inline"
     data-kevmi-label="Order checkout"></div>

Open checkout from your interface#

The kevmi:opened and kevmi:closed document events let your interface react to opening and closing. A kevmi:error event on the trigger reports an invalid checkout URL. None proves payment. Call the JavaScript API after the widget script has loaded.

window.Kevmi.open(checkoutUrl, {
  mode: 'modal',
  label: 'Order checkout',
  closeLabel: 'Close checkout'
});

// Inline blocks added after page load are detected automatically.
// You may also request mounting explicitly:
window.Kevmi.mount(document);

What proves a successful payment#

Do not put API keys or signing secrets in HTML. The widget receives only a public link to one invoice. Checkout encrypts card details and bank codes with the gateway key; the Kevmi server does not accept them in plaintext.

postMessage updates interface state, not order fulfilment. Check the message origin and source window before processing. Use a verified payment.succeeded event or a succeeded status in the server’s GET link.payment summary for the final result.

Before adding the widget to production#

• Allow the Kevmi origin in your Content Security Policy script-src and frame-src directives without broadening unrelated policies.
• Check narrow screens, keyboard access, and light and dark themes.
• Confirm the invoice is active, unexpired and has the correct price and cost shares.
• Keep an ordinary payment link as a fallback.
• Test failed deliveries and duplicate webhook events without issuing an order twice.