Part 14: Finally removing GloBee

Photo by Ana Toma on Unsplash

Introduction

This guide aims to program a website to accept Bitcoin. In the previous tutorial, We built and configured a server to hold “Bitcoin Core” and our “Server”. In this part, we are going to host the “Admin”, “WWW” and “CDN” and finally replace “GloBee” so that we 100% control over the software stack. In the Bitcoin world, this is known as “sovereignty”.

The SQL

We made a couple of changes to the SQL this time around. Firstly, the product table was changed, we removed the email field as we have a new table to hold all of the metadata.

CREATE TABLE `product` (
 `id` INTEGER PRIMARY KEY AUTOINCREMENT,
 `address` TEXT,
 `name` TEXT,
 `price` TEXT,
 `quantity` INTEGER
);

We created a new table called order_meta this has been designed to hold all the order details. Seeing as we added Billing and Shipping address and we envisage there will be more fields added in the future we did not want to have to update the server and CDN everytime a new field was added. This we just add the class sr-input to the field in “cart.html” and it will automatically be added to this table.

CREATE TABLE `order_meta` (
 `id` INTEGER PRIMARY KEY AUTOINCREMENT,
 `productid` INTEGER,
 `metaname` TEXT,
 `metavalue` TEXT
);

Code sections

The code for this release can be found “here”.

WWW

We made significant changes to this section. Firstly we purchased a “theme” so that it now looks like a webpage rather than a just a hyperlink as it was before. There was a lot of stuff in this template we removed, cryptoskillz like things super clean.
*note: if you want to use this WWW as is please do purchase the template it is only $10 and it has been very well done.

You can check this theme out (shown below) by clicking “here”

The theme

Note* As you can see there is a size dropdown, this does not work yet this will come when we do the next update to the CDN.

CDN

The majority of the time (code wise) was spent in the “CDN” section. We refactored the CSS to make sure it would not break on any site it was injected into. We also added billing and shipping inputs which can be invoked during the initialisation as shown below.

*note the start country will set the country drop down to that country.

<script type="text/javascript">
  /*
    0 = server url
    1 = animated
    2 = quantity count
    3 = cdn url
    4 = uid
    5 = theme
    6 = billing address 
    7 = shipping address
    8 = start country
  */

SR.init([
  "http://127.0.0.1:3000/",
  false,
  15,
  "http://127.0.0.1:8080/cdn/",
  "3",
  "",
  1,
  1,
  "GB"
]);   
</script>

The screenshot below shows the cart with the first item being added to it.

Then when you click checkout you will see the new billing address UX.

If you untick the “Billing & Shipping the same” you will see that the pay button changes to shipping.

if you click this it will show the shipping address UX and the pay button

Once the pay button has been clicked you will see the standard pay screen. We fixed the bugs on the screen but did not do anything else.

We plan to add a bunch of functionality to the CDN to make this really useful. We have decades of experience shopping cart checkout experience that we will be applying directly to this.

Server

We made a small change to the server that allows us to store the metadata. It simply takes the request object and stores all of the data in the order_meta table.

this.storeUserDetails = function storeUserDetails(req,res)
  {
    let data = [req.query.address];
    //console.log(data)
    let sql = `SELECT * FROM product where address = "`+req.query.address+`"`;
    //debug
db.get(sql, [], (err, result) => {
      console.log(result)
      if (err) {
        console.log(err)
      }
      let data = [result.id];
      let sql = `delete FROM order_meta WHERE productid = ?`;
      db.run(sql, data, function(err) {
        if (err) {
          return console.error(err.message);
        }
        for (var metaname in req.query) 
        {
            if (req.query.hasOwnProperty(metaname)) 
            {
                var metavalue = req.query[metaname]
                metaname = metaname.replace("sr-", "");
db.run(
                `INSERT INTO order_meta(productid,metaname,metavalue) VALUES(?,?,?)`,
                [
                  result.id,
                  metaname,
                  metavalue
                ],
                function(err) {
                  if (err) {
                    return console.log(err.message);
                  }
                }
              );
              //debug
              //console.log(metaname, metavalue);
            }
        }
        res.send(JSON.stringify({ status: "ok" }));
        });
    });
  }

Admin

No changes were made to the admin this time, though we may want to display the order metadata in the admin so an update will be required in future

Testing

I will not run through all the testing again as we covered it fully in this “tutorial”.

Conclusion

Now we have a fully working Bitcoin core, server and CDN to inject it easily into any site. This pretty much covers everything we set out to do. The next tutorial will deal be a usage/installation guide which will be a condensed version of all these tutorials into a single document for people who do not care how it was built and just want to install and use it.

Also, seeing as we have completed all the tasks we have set out to do we may not (after the next one) do any more tutorial parts and instead, use another format such as a monthly update guide with normal git push to cover everything else.

Of course, we will most likely do some accompanying tutorials when we decided to add lighting, other cryptos, elements and whatever cool tech surfaces in the future.