Implement Frontend and Integrate APIs

Choose Button Design

First, choose a button design to implement on the purchase page of your website. Choose the design of your choice.

In this guide, assume you have selected the following buttons.

Implement Frontend to start payment

In Next.js or React.js, The implementation would look something like follows.

<!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>Store</title>
 
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <img src="tshirt.jpg" alt="Tshirt" style="width:100%">
    <h1>Cotton T-shirt</h1>
    <p class="price">$0.001</p>
    <p>ATC 5050 Everyday Cotton Blend Tee</p>
    <p><button onclick="handleOrder()">Buy</button></p>
  </div>
</body>
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const API_URL = 'YOUR_API_URL'
 
  function handleOrder() {
    axios.post(`${API_URL}/create-order`, {amount: '0.001'})
      .then((res) => {
        console.log('res', res.data)
        const {data} = res
        if(data.payment_url) {
          console.log('vao day')
          window.open(data.payment_url, '_blank').focus();
        }
      })
      .catch(err => {
        alert('error')
        console.error(err)
      })
  }
</script>
</html>

const callCheckout = async (data) => {
  // call the API that you created previous section
  const apiUrl = process.env.API_URL_CREATE_ORDER_NORMAL
  const result = await axios.post(apiUrl).catch(error => {
    console.log(error.response)
  });
  if (result.status === 200) {
    window.location = result.data.paymentUrl
  } else {
    alert('You have already started this payment. Please continue the payment or start from order again.')
  }
}

return (
//...

  <form onSubmit={handleSubmit(callCheckout)}>
    <div className='...'>
      <button type='submit'>
        <Image src='/nodex_pay.png' width='xxx' height='xx' alt='crypto pay' />
      </button>
    </div>
  </form>

//...
)

Implement Frontend to return after payment completed

Regardless of success or failure, a "Back to Payees' Services" button will appear on the payment completion screen. Implement the screen to which the user transitions when this button is pressed.

The URL to which the payer is redirected when clicking each button is set on the business client management screen.

The following are possible reasons for settlement failures.

Blockchain Network is out of service
- The network itself may be out of service, as Nodex Pay is guaranteed to work only when the network is healthy by managing payments via smart contracts.
Insufficient GAS
- Depending on the state of the blockchain, GAS may soar.
The amount of payment is not enough
- Token price is volatile at any moment. Sometimes the volatility is unexpected high and exceeds estimated payment amount.

On these URLs, ?payment_token=:payment_token will be added to the Query String of the URL. This is used to check if the data in the business client's database has been updated by the kickback from Nodex Pay, and then the next screen is displayed. In Next.js, the implementation in the case of a successful would look something like follows.

<!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>Store</title>
 
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h3>Your order</h3>
      <table id="order-table">
        <tr>
          <th>PRODUCT NAME</th>
          <th>DATE TIME ORDERED</th>
          <th>YOUR ORDER CODE</th>
          <th>STATUS</th>
        </tr>
      </table>
    </div>
  </body>
 
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const url = new URL(window.location);
    const paymentToken = url.searchParams.get("payment_token");
    const API_URL = 'YOUR_API_URL';
 
    const table = document.getElementById("order-table");
 
    axios
      .get(`${API_URL}/order`, { params: { payment_token: paymentToken } }) // get order
      .then((res) => {
        const orders = res.data;
        orders.forEach((order, i) => {
          // render order
          const row = table.insertRow(i + 1);
 
          const productName = row.insertCell(0);
          productName.innerHTML = order.product_id;
 
          const dateTimeOrder = row.insertCell(1);
          dateTimeOrder.innerHTML = order.order_date_time;
 
          const orderCode = row.insertCell(2);
          orderCode.innerHTML = order.order_code;
 
          const status = row.insertCell(3);
          status.innerHTML = order.order_status;
        });
      });
  </script>
</html>

const [order, setOrder] = useState({})
const router = useRouter()

const asyncInit = async () => {
  const order = await callGetOrderByPaymentToken()
  setOrder(order)
}

useEffect(() => {
  if (!router.isReady) return;
  asyncInit()
}, [router.isReady])

const callGetOrderByPaymentToken = async () => {
  const apiUrl = `${process.env.API_URL_GET_ORDER_BY_PAYMENT_TOKEN}?payment_token=${router.query.payment_token}`
  const result = await axios.get(apiUrl)
  if (result.status === 200) {
    return result.data.order
  } else {
    alert('error!')
  }
}

//...

return (
//...

// render "order" state with purchase completed message

//...
)

Summary

The above will achieve the flow of the first video.

If there is anything you would like Nodex Pay to improve in order to make it better, please let us know. We will do our best to make the necessary modifications to provide a better user experience.

PreviousImplement APIs NextPayment in Mobile Devices

Last updated 5 months ago

<!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>Store</title>
 
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h3>Your order</h3>
      <table id="order-table">
        <tr>
          <th>PRODUCT NAME</th>
          <th>DATE TIME ORDERED</th>
          <th>YOUR ORDER CODE</th>
          <th>STATUS</th>
        </tr>
      </table>
    </div>
  </body>
 
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const url = new URL(window.location);
    const paymentToken = url.searchParams.get("payment_token");
    const API_URL = 'YOUR_API_URL';
 
    const table = document.getElementById("order-table");
 
    axios
      .get(`${API_URL}/order`, { params: { payment_token: paymentToken } }) // get order
      .then((res) => {
        const orders = res.data;
        orders.forEach((order, i) => {
          // render order
          const row = table.insertRow(i + 1);
 
          const productName = row.insertCell(0);
          productName.innerHTML = order.product_id;
 
          const dateTimeOrder = row.insertCell(1);
          dateTimeOrder.innerHTML = order.order_date_time;
 
          const orderCode = row.insertCell(2);
          orderCode.innerHTML = order.order_code;
 
          const status = row.insertCell(3);
          status.innerHTML = order.order_status;
        });
      });
  </script>
</html>