JavaScript widget and card fields

<script
  defer
  src="/vendor/orsunpay/orsunpay.0.1.1.umd.min.js"
  integrity="sha384-REPLACE_WITH_MANIFEST_VALUE"
  crossorigin="anonymous"
></script>
<script defer src="/assets/payment-button.js"></script>
<div id="pay-button"></div>

const button = OrsunPay.button("#pay-button", {
  // Synthetic slug: replace with a link created by your backend.
  paymentLinkUrl: "{CHECKOUT_BASE_URL}/l/AAAAAAAAAAAAAAAAAAAAAAAA",
  mode: "popup",
  label: "Pay (opens a new window)",
  locale: "en",
  theme: "dark",
  onClose() {
    // Closing the window is NOT a payment result.
    document.querySelector("#order-message").textContent =
      "Check your order status with the store.";
  },
});

// When your page/component unmounts:
// button.destroy();

import { button } from "/vendor/orsunpay/orsunpay.0.1.1.esm.js";

// Supplied by your server's sale response through your app's existing data flow.
const paymentPageUrl =
  document.querySelector("#pay-button").dataset.checkoutUrl;
const handle = button("#pay-button", { checkoutUrl: paymentPageUrl });

let opened;
document.querySelector("#my-payment-button").addEventListener("click", () => {
  opened?.destroy();
  opened = OrsunPay.open({ checkoutUrl: paymentPageUrl, mode: "popup" });
});