how to create payment with SBD page on e-commerce site
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 . . . . . .
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='<div class="col-sm-8"><div class="panel panel-default"><div class="panel-body text-center"><img src="https://img.busy.org/@'+name+'" class="img-circle" alt="Cinque Terre" width="70px"><p>your balance : '+balance+'</p></div></div></div><div class="col-sm-4"><p class="text-danger">Your Balance is not enough, please use other account</p></div>';
}
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='<div class="col-sm-8"><div class="panel panel-default"><div class="panel-body text-center"><img src="https://img.busy.org/@'+name+'" class="img-circle" alt="Cinque Terre" width="70px"><p>your balance : '+balance+'</p></div></div></div><div class="col-sm-4"><a href="https://steemconnect.com/sign/transfer?from='+name+'&to=team2dev&amount='+total+'%20SBD&memo=paywithsbd&redirect_uri=" class="btn btn-info">Pay Now</a></div>';
}
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
Thank you for your contribution @team2dev.
Below are the points we suggest for improvements to your tutorial:
Your tutorial is quite short for a good tutorial. We recommend you aim for capturing at least 2-3 concepts.
The tutorial is well explained, but it is a very simple tutorial and we already have available similar tutorials.
We suggest you bring something more innovative about payment in SBD or STEEM.
In the title of the tutorial we suggest you put some key words of the technologies and programming language that you will use. As in this tutorial, could be the key words: Html, Javascript and SteemJs .
In code it is very important to have comments explaining what certain lines of code do. For the reader it facilitates the interpretation of the code that is developing.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @portugalcoin! Keep up the good work!
Hi @team2dev!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hey, @team2dev!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Hello @team2dev! This is a friendly reminder that you have 3000 Partiko Points unclaimed in your Partiko account!
Partiko is a fast and beautiful mobile app for Steem, and it’s the most popular Steem mobile app out there! Download Partiko using the link below and login using SteemConnect to claim your 3000 Partiko points! You can easily convert them into Steem token!
https://partiko.app/referral/partiko