SDK UI checkout

import { useState } from 'react';
import { SixpayCheckoutModal } from '@sigworld/sdk-ui';

export function PayButton({ session }: { session: { id: string; checkoutToken: string } }) {
  const [open, setOpen] = useState(false);

  return <>
    <button type="button" onClick={() => setOpen(true)}>Pay now</button>
    <SixpayCheckoutModal
      open={open}
      onClose={() => setOpen(false)}
      checkoutSessionId={session.id}
      checkoutToken={session.checkoutToken}
    />
  </>;
}

<button id="pay-button">Pay now</button>
<script type="module">
  import { createSixpayCheckout } from 'https://cdn.sixpay.xyz/v1/sixpay-checkout.module.js';

  const checkout = createSixpayCheckout({
    checkoutSessionId: session.id,
    checkoutToken: session.checkoutToken,
  });

  document.querySelector('#pay-button').addEventListener('click', () => checkout.open());
</script>