Controlling the widget

await window.PaymoveWidget.ready();

const widget = window.PaymoveWidget.get("checkout");
widget?.open();
widget?.close();
widget?.destroy();

• ready() waits for widgets that are starting right now. A widget with invalid configuration does not block the others - ready() resolves anyway, and get() returns undefined for it.
• There is no update() method. You can’t change the configuration after start - remove the widget and insert the script again.
• The script uses the defer (or async) attribute, so window.PaymoveWidget may not exist yet when your code runs. Access it only in the script’s onload or after DOMContentLoaded.

​

Custom button

<script
  defer
  src="https://go.sandbox.paymove.io/v1/sdk.js"
  data-product-id="EVENT_PRODUCT_ID"
  data-widget-id="tickets"
></script>

<a href="/tickets" data-paymove-open="tickets">Buy tickets</a>
<button type="button" data-paymove-open="tickets">Buy tickets</button>

• A click on a link with data-paymove-open opens the modal instead of navigating to href. Put a fallback page in href - it will work if the script fails to load.
• A click with Ctrl, Cmd, Shift or Alt held is ignored, so “open in new tab” works as usual.
• Elements with the disabled attribute or aria-disabled="true" are ignored.
• The attribute also works on elements inside Shadow DOM and on elements added to the page later.

<button type="button" data-paymove-open="tickets" disabled id="buy">Buy tickets</button>

<script>
  window.addEventListener("DOMContentLoaded", async () => {
    await window.PaymoveWidget?.ready();
    if (window.PaymoveWidget?.get("tickets")) {
      document.getElementById("buy").disabled = false;
    }
  });
</script>

document.querySelector("#buy").addEventListener("click", () => {
  window.PaymoveWidget?.get("tickets")?.open();
});

​

The paymove:completed event

document.addEventListener("paymove:completed", (event) => {
  const { widgetId, productId, orderId } = event.detail;
  // e.g. refresh the invoice list or show a thank-you message
});

• The event arrives only once the payment page has confirmed the payment with the paymove API and displayed the confirmation screen.
• It arrives once per payment.
• After the payment the modal stays open so the customer can see the confirmation. They close it with the “End” button, the close icon, a click on the backdrop or the Esc key.