search

Inline Html Snippet

In addition to the Checkout URL feature, we have provided an even quicker way of integration, using a sample piece of HTML, CSS, and Js snippet.

See the snippet below;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>XendBridge</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://inline.xendbridge.com/style.css" />
  </head>
  <!--  The onload event is used to call the onLoadFunctions() function when the page is loaded -->
  <body onload="onLoadFunctions()">
    <div class="wrapper">
      <div class="card-box">
        <div id="logo"></div>
        <div id="toast"></div>

        <div id="pageloaderbackdrop"><div id="pageloader"></div></div>

        <div id="orderTypes"></div>

        <div id="buyOrderForm"></div>
        <div id="sellOrderForm"></div>
        <div id="swapOrderForm"></div>

        <div id="buyFiatPaymentMethod"></div>
        <div id="buyCryptoPaymentMethod"></div>
        <div id="buyConfirmPurchase"></div>
        <div id="buyAccessCode"></div>

        <div id="sellFiatPaymentMethod"></div>
        <div id="sellCryptoPaymentMethod"></div>
        <div id="sellConfirmPurchase"></div>
        <div id="sellAccessCode"></div>

        <div id="payinFiatPaymentMethod"></div>
        <div id="receiveinFiatPaymentMethod"></div>
        <div id="swapFiatConfirmPurchase"></div>

        <div id="payinCryptoPaymentMethod"></div>
        <div id="receiveinCryptoPaymentMethod"></div>
        <div id="swapCryptoConfirmPurchase"></div>

        <div id="trademark"></div>
      </div>
    </div>

    <!-- Ensure to add your public key and BASEURL(sandbox / production) to the enclosed script tag below. -->
    <script>
      let publicKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
      let BASEURL = "https://checkout-api-sandbox.xendbridge.com";
    </script>
    <script src="https://inline.xendbridge.com/script.js"></script>
  </body>
</html>

The only parameters needed to be provided by the third party are the publicKey which can be gotten from the application created on the third party's dashboard and the baseUrl which can be any of the available environments below;

Sandbox Url

Live Url

PreviousPayment MethodsNextDeFi Checkout

Last updated