CheckoutWithEth (JS SDK)

CheckoutWithEth element is our embeddable iframe which allows you to enable your users to pay with ETH regardless of the token or coin that your NFT is priced in

“Review your purchase” page

The native Javascript offers you three composable pieces to create the CheckoutWithEth element:

1. createCheckoutWithEth
2. createCheckoutWithEthLink
3. createCheckoutWithEthMessageHandler

If you’re looking to use the native JS SDK and get started as soon as possible, you’ll start with the createCheckoutWithEth which uses both createCheckoutWithEthLink and createCheckoutWithEthMessageHandler under the hood to create the CheckoutWithEth element.

createCheckoutWithEth

This is the function that you’d be using most of the time to create the CheckoutWithEth element.

Code Snippet

import type {
  createCheckoutWithEthElement,
} from '@nftgate/js-client-sdk';

// Assuming a container exists:
const iframe = await createCheckoutWithEthElement({
  sdkClientSecret: '',
  elementOrId: 'nftgate-checkout',
  payingWalletSigner,
  setUpUserPayingWalletSigner,
  receivingWalletType,
  onError(error) {
    console.log('Error:', error);
  },
  onSuccess({ transactionId }) {
    console.log('Success! Transaction:', transactionId);
  },
});

// Alternatively, insert the iframe programmatically:
//      const iframe = createCheckoutWithEth(...)
//      document.getElementById('nftgate-checkout').appendChild(iframe);

Props

createCheckoutWithEthLink

This is the core building block that builds up the iframe link required to display the CheckoutWithEth element.
Once you generate the link, you can proceed to display it in an iframe but you’d still need to listen for the payWithEth event which will kickstart the process of getting the user to pay. We provide a handler which does most of the heavy lifting.

Code Snippet

const checkoutWithEthUrl = await createCheckoutWithEthLink({
    sdkClientSecret, 
    payingWalletSigner,
    receivingWalletType,
    options,
});

Props

createCheckoutWithEthMessageHandler

This is the message handler that is to be registered.
Essentially, this listens to two main events: payWithEth and sizing.

Code Snippet

const iframe = document.createElement("iframe");

window.addEventListener(
    "message",
    createCheckoutWithEthMessageHandler({
      iframe,
      setUpUserPayingWalletSigner,
      payingWalletSigner,
      onSuccess,
      onError,
      suppressErrorToast,
    })
);

Props

Writing your own handler

You can write your own handler if you wish, Here’s how:
The event object that is passed by default into the message event contains the data filed which has the following type

type event.data = {
    eventType: 'payWithEth',
  chainId: number,
  data: string,
  value: string,
  to: string,
  transactionId: string
}   | {
    eventType: 'sizing'
  height: string,
  width: string,
}

You simply create a function that handles or ignores either of the two events, exactly the way you want:

window.addEventListener('message', (event: MessageEvent) => {
        if (!event.origin.startsWith("https://nftgate.net")) {
      return;
    }
    const data = event.data;
    switch(data.eventType): {
        case "payWithEth": {
        break;
      }
      case "sizing": {
        break;
      }
    }
});