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, 
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
readyfunction 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 |
5. Running and testing
- If your balance is not enough
- and if your sbd balance enough will display the button for payment
Curriculum
Proof of Work Done
https://gist.github.com/team2dev/b0e4770a44881c1d6efe5ef6dda3fe2f