Payment widget embedding SDK

GET /Card/Sbp/embed.js

Embedding SDK: SbpWidget.mount() (the widget) and SbpWidget.renderButton() (the branded SBP button on top of it). A single file serves both flows — the mode is derived from the URL the script was loaded from, and so is the default apiBase.

<div id="pay"></div>
<script src="https://pay-sandbox.digitalspb.com/Card/Sbp/embed.js"></script>
<script>
  SbpWidget.mount('#pay', {
    invoiceId: '1624505c-0031-00cf-7d54-4cf1ce08cb30',   // from the createInvoice response
    token: 'eyJ...',                                      // AuthorizationToken from the same response
    brand: { name: 'Warm Corner', logo: '/logo.png', primary: '#c2410c', background: '#fff8f3' },
    onSuccess: function () { location.href = '/thanks'; },
    onFail:    function () {},
    onExpired: function () {},   // the QR has expired — create a new invoice
    onError:   function (e) {}
  });
</script>

mount() inserts an <iframe> with the widget page and talks to it over postMessage: iframe auto-resize plus success / fail / expired / error events mapped to callbacks. Messages are accepted only from that frame and only from the payment domain origin. The returned object exposes destroy().

renderButton('#pay', { createInvoice, brand, ... }) renders the SBP button: invoice creation is delegated to the partner’s own backend through the createInvoice() callback (it returns { invoiceId, token }), the button handles the states and mounts the widget on success. The result exposes setBrand(), reset() and destroy().