Get Started

Get your app-key and secret

otc.legendtrading.com

Get the code for signature

otc.legendtrading.com

Implement the backend

public function index()
{
    return view('legend');
}

Implement the frontend

React is externalized in your web page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="strict-origin-when-cross-origin">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Legend Jssdk Mobile</title>
  <style>
    html, body {
      align-items: flex-start;
      background-color: #f6fafa;
      display: flex;
      justify-content: center;
      min-height: 100%;
      margin: 0;
      padding: 0;
      width: 100%;
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
  <script src="https://www.legendtrading.com/jssdk-mobile-v3/legend-trade.min.js"></script>
</head>
<body>
  <legend-trade
    timestamp="1587365207"
    signature="0123456789ABCDEF"
    app-id="Bitrue"
    app-uid="d58e3582afa99040e27b92b13c8f2280"
    app-url="https=//www.bitrue.com/"
    app-key="xxxxxxxx"
    app-email="[email protected]"
  ></legend-trade>
  
  <script>
    (() => {
      const $legend = document.querySelector("#J_legend");
      const handler = (e) => {
        console.log(e.type, e.detail, e);
      };
      $legend.addEventListener("my-event", handler, false);
      $legend.addEventListener("locale-change", handler, false);
      $legend.addEventListener("legend-quit", handler, false);
    })();
  </script>
</body>
</html>