Skip to content

Building the frontend

Including BizApp client side SDK

The easiest way to get the BizApp server side SDK is via our official CDN.

Include the following line in header of ALL your BCML file.

<script src="https://cdn.bizstore.io/bizapp-0.0.2.min.js"></script>

Boilerplate

Use the boilerplate below to quick start

IMPORTANT: Make sure your content is wrapped in <bizapp-root></bizapp-root>, best place to put is the immediate children of <body></body>.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="HandheldFriendly" content="true">
  <title>My BizApp</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bizstore.io/bizapp-0.0.2.min.js"></script>
  <style>
    button { width: 100%; margin: 0.3rem 0; border: 0; background-color: #42A5F5; color: white; font-size: 1rem; padding: 0.6rem 1.3rem; border-radius: 8px; transition: all 0.2s; cursor: pointer; outline: 0; }
    button:hover { background-color: #1565C0; }
  </style>
</head>
<body>
  <bizapp-root>
    <button onclick="login()">Login</button>
    <button onclick="pay()">Pay</button>
    <pre id="result"></pre>
    <script></script>
  </bizapp-root>
</body>
</html>

Note that jQuery is NOT required for the SDK to work. We will code login() and pay() function in the next section.

User authentication

In order to achieve user authentication, you just have to use BizApp.login, no user interaction required.

It accepts 2 parameters, the first one is the options, and the second one is the callback when login success or failed. You can read more about it in the References.

Inside the script tag, implement login() function as follow:

<script>
  function login() {
    // Make sure the endpoint and path match the one you specified on Server side SDK
    BizApp.login({
      url: "https://mybizapp.com:3000/api/login"
    }, function(error, userData) {
      if (userData.name) {
        $("#result").text("Logged in!");
      } else {
        $("#result").text("Failed to log in");
      }
    });
  }
</script>

Handling payment

Payments are done using the BizApp.payToWallet function.

It accepts 2 parameters, the first one is the options, and the second one is the callback when payment success or failed. You can read more about it in the References.

One useful key in this API is options.identifier, it allows you to specify an optional identifier with maximum of 8 characters, which is useful to identify payments among different users.

Inside the script tag, implement pay() function as follow:

<script>
  function pay() {
    var options = {
      address: "yewLaSjEiziHhqgRwmyTomMNfiQm9h4SNM",
      amount: 100000000, // 1 TRVC
      message: "Payment for BizApp",
      identifier: "446f7261"
    };

    BizApp.payToWallet(options, function(error, result) {
      if (error) {
        $("#result").text("Payment failed: " + error);
      } else {
        $("#result").text("Payment success: " + JSON.stringify(result));
        // You can send to backend for verification
        $.post("https://mybizapp.com:3000/api/verify",
          { trxId: result.txId, toAddress: result.toAddress, amount: result.amount },
          function() { });
      }
    });
  }
</script>

Back navigation

By default, tapping on back button will go to the previous page. In case you need to override the back button behavior, use BizApp.setBackHandler function.

It accepts 1 parameter, which is the options. You can read more about it in the References.