Checkout

Learn how to seamlessly use the wano.finance checkout in your application.

Step 1: Getting app Id

Before you can add Wano to your app you need to create an account. When you create an account you will get an appId connected to your wallet address. To copy your App Id, Log in to the Wano dashboard -> Go to Integrations page -> Copy App Id

Step 2: Configure checkout info

You need to pass information such as appId, amount, metadata, etc. The table below lists the parameters that you can pass when initialising a transaction.

Param

Required

Description

You can use wano in your application like in the example below:

<html>
<div class="main-wrapper">
  <div class="item-base">
    <div class="item-img">
      <div class="img-frame">
      </div>
    </div>
    <div class="content-wrapper">
      <div class="title-wrapper">
        <p class="title-name">Classic Chrono</p>
        <p class="title-price">$64.35</p>
      </div>
      <p class="item-desc">
        Introducing the Classic Chrono – a timeless timepiece that combines elegant design with precision
        engineering.
      </p>
      <div id="pay-btn" class="item-button">
        <p class="btn-text" id="btn-text">Pay with wano</p>
      </div>
    </div>
  </div>
</div>
<script src="https://wano.finance/script/inline.min.js"></script>
</html>

  document.getElementById("pay-btn").addEventListener("click", function() {
    const config = {
      appId: "appId",
      amount: {
        value: 64.35,
        currency: "USD"
      },
      metadata: {
        email: "customer@domain.com",
        // additional info
      },
      onClose: () => {
      },
      onError: (data) => {
      },
      onSuccess: (data) => {
        document.getElementById("btn-text").innerText = "Payment collected";
        document.getElementById("hash").innerText = "Transaction hash: " + data.transaction_data.hash;
      }
    };
  window.wanoCheckout.open(config);

PreviousSupport NextPayment links

Last updated 10 months ago