SEP-24: Hosted Deposit and Withdrawal

// Fetches and returns the endpoint used for SEP-24 transfer interactions.
export async function getTransferServerSep24(domain) {
  let { TRANSFER_SERVER_SEP0024 } = await fetchStellarToml(domain);
  return TRANSFER_SERVER_SEP0024;
}

// Fetches and returns basic information about what the SEP-24 transfer server supports.
export async function getSep24Info(domain) {
  let transferServerSep24 = await getTransferServerSep24(domain);

  let res = await fetch(`${transferServerSep24}/info`);
  let json = await res.json();

  if (!res.ok) {
    throw error(res.status, {
      message: json.error,
    });
  } else {
    return json;
  }
}

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // Launch the interactive SEP-24 popup window for the user to interact directly with the anchor to begin a transfer.
  const launchTransferWindowSep24 = async ({
    homeDomain,
    assetCode,
    assetIssuer,
    endpoint,
  }) => {
    // We initiate the transfer from the SEP-24 server, and get the
    // interactive URL back from it
    let { url } = await initiateTransfer24({
      authToken: $webAuthStore[homeDomain],
      endpoint: endpoint,
      homeDomain: homeDomain,
      urlFields: {
        asset_code: assetCode,
        account: data.publicKey,
      },
    });

    /* ... */
  };
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

// Initiates a transfer using the SEP-24 protocol.
export async function initiateTransfer24({
  authToken,
  endpoint,
  homeDomain,
  urlFields = {},
}) {
  let transferServerSep24 = await getTransferServerSep24(homeDomain);

  let res = await fetch(
    `${transferServerSep24}/transactions/${endpoint}/interactive`,
    {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${authToken}`,
      },
      body: JSON.stringify(urlFields),
    },
  );
  let json = await res.json();

  if (!res.ok) {
    throw error(res.status, {
      message: json.error,
    });
  } else {
    return json;
  }
}

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // Launch the interactive SEP-24 popup window for the user to interact directly with the anchor to begin a transfer.
  const launchTransferWindowSep24 = async ({
    homeDomain,
    assetCode,
    assetIssuer,
    endpoint,
  }) => {
    /* ... */

    // We add our callback method to the end of the URL and launch the popup
    // window for the user to interact with
    let interactiveUrl = `${url}&callback=postMessage`;
    let popup = window.open(interactiveUrl, "bpaTransfer24Window", "popup");

    // We listen for the callback `message` from the popup window
    window.addEventListener("message", async (event) => {
      /* ... */
    });
  };
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // Launch the interactive SEP-24 popup window for the user to interact directly with the anchor to begin a transfer.
  const launchTransferWindowSep24 = async ({
    homeDomain,
    assetCode,
    assetIssuer,
    endpoint,
  }) => {
    /* ... */

    // We listen for the callback `message` from the popup window
    window.addEventListener("message", async (event) => {
      // Close the interactive window if it's not already
      popup?.close();

      // Store the transfer in the browser's localStorage
      transfers.addTransfer({
        homeDomain: homeDomain,
        protocol: "sep24",
        assetCode: assetCode,
        transferID: event.data.transaction.id,
      });

      /* ... */
    });
  };
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // Launch the interactive SEP-24 popup window for the user to interact directly with the anchor to begin a transfer.
  const launchTransferWindowSep24 = async ({
    homeDomain,
    assetCode,
    assetIssuer,
    endpoint,
  }) => {
    /* ... */

    // We listen for the callback `message` from the popup window
    window.addEventListener("message", async (event) => {
      /* ... */

      // If the user has requested a withdraw with the anchor, they will
      // need to submit a Stellar transaction that sends the asset from
      // the user's account to an account controlled by the anchor.
      if (event.data.transaction.kind === "withdrawal") {
        // Generate a transaction with the necessary details to complete
        // the transfer
        let { transaction, network_passphrase } =
          await createPaymentTransaction({
            source: data.publicKey,
            destination: event.data.transaction.withdraw_anchor_account,
            asset: `${assetCode}:${assetIssuer}`,
            amount: event.data.transaction.amount_in,
            memo: Buffer.from(event.data.transaction.withdraw_memo, "base64"),
          });

        // Set the component variables to hold the transaction details
        paymentXDR = transaction;
        paymentNetwork = network_passphrase;

        // Open the confirmation modal for the user to confirm or reject
        // the Stellar payment transaction. We provide our customized
        // `onPaymentConfirm` function to be called as part of the
        // modal's confirming process.
        open(ConfirmationModal, {
          transactionXDR: paymentXDR,
          transactionNetwork: paymentNetwork,
          onConfirm: onPaymentConfirm,
        });
      }
    });
  };
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->