how to create payment with SBD page on e-commerce site

how to create payment with SBD page on e-commerce site | Ecency

Repository

https://github.com/steemscript/steemconnect

What Will I Learn?

You will learn how to design a sample page for payment
You will learn how to check SBD amount of account
You will learn how to modify the the steemconnect link for sending SBD

Difficulty

basic

Tutorial Contents

STEEM coins and SBD have spread throughout the world. In fact, there are those that make it a payment tool. On this occasion, @team2dev will make a tutorial on how to create a payment page using SBD. I hope this can be useful for developers who want to build an e-commerce site that provides payments using STEEM or SBD. check it out . . . . . .
Screen Shot 2019-01-02 at 04.36.20.png

1. Design the page

Open your editor software and create new html file (I use Sublime text for editor)
Here I use bootstrap and jQuery for style, So first of all add the CDN of bootstrap, jQuery and also CDN of SteemJS

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>
</body>
</html>

Create the title or the header of page. We will create it in Navbar

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Pay With SBD</a>
    </div>
  </div>
</nav>

Create the table of bill detail. Before that Split the page into two columns, the first column for bill detail and the other for the payment button.

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <table class="table">
                <thead>
                    <tr>
                        <th>Nama Barang</th>
                        <th>Harga(SBD)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>apam</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Pizza</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <th>Total</th>
                        <th id="total">15</th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Then create a text input for checking the balance of the account

<div class="col-sm-6">
            <div class="input-group">
                <input type="text" id="name" class="form-control" placeholder="Input Your Steem Account">
                <div class="input-group-btn">
                <button id="button" class="btn btn-default">Check</button>
                </div>
            </div>
            <div class="row" id="display">          
            </div>
        </div>

Save and try to run on your browser

2. Create a function for checking SBD balance of the account that will pay the invoice, Here we use steemJS function

First of all, open the ready function of jQuery

$(document).ready(function(){
});

Add the click function on the button for checking

$("#button").click(function(){
});

Add the steemJS function to get detail of account.

$("#display").empty();
    var name=$("#name").val();
    steem.api.getAccounts([name], function(err, result) {
    var balance=result[0].sbd_balance;
    balance=balance.split(" ");
    total=$("#total").text();
    console.log(Number(balance[0]));
});

Code	Explanation
`$("#display").empty();`	to empty the element the will display the message that the balance of account enough for paying total bill or not
`var name=$("#name").val();`	get account name that input by user
`steem.api.getAccounts([name], function(err, result)`	SteemJS function to get detail of Steemit account
`var balance=result[0].sbd_balance;`	get the SBD balance
`balance=balance.split(" ");`	SBD balance Data is a string for ex : `100 SBD`, Here we just need the number so we should split it by space
`console.log(Number(balance[0]));`	try to appear the number of SBD balance in console
`total=$("#total").text();`	get the total of invoice

3. Checking if the bill balance Big then the SBD balance and will display the message that your SBD balance is not enough.And if the SBD balance exceeds the bill, that will display a button to make a payment.

Check if the bill balance big then SBD balance

if(Number(total)>Number(balance[0])){
        var display='+name+'" class="img-circle" alt="Cinque Terre" width="70px">your balance : '+balance+'
Your Balance is not enough, please use other account
';       
    }

display is a variable that contains the html element to display the SBD balance of account the to display the message that the balance is not enough.

Create statement if the balance enough

else{
        var display='+name+'" class="img-circle" alt="Cinque Terre" width="70px">your balance : '+balance+'
+name+'&to=team2dev&amount='+total+'%20SBD&memo=paywithsbd&redirect_uri=" class="btn btn-info">Pay Now';
    }

when SBD balance big then the bill balance then the display variable contains the html element to display the detail of account and to display the button for payment. When we click this button will redirect to steemconnect for transferring the SBD.

Append the display variable in html element

$("#display").append(display);

4. Modify the steemconnect link

Here the link for transferring SBD

https://steemconnect.com/sign/transfer?from='+name+'&to=team2dev&amount='+total+'%20SBD&memo=paywithsbd&redirect_uri=https://team2dev.site

code	explanation
`from='+name+'`	the sender, it is the account name input by user in input text
`to=team2dev`	receiver, It is your account the will receive the payment
`amount='+total+'%20SBD`	amount of bill that will transfer, and SBD is the type of coin. If you will use STEEM, you can put STEEM there.
`memo=paywithsbd`	memo
`redirect_uri=https://team2dev.site`	redirect url after transaction