Single Item 'Buy Now' NowPayments.io Checkout -- plus Code
with NowPayments.io API, HTML, and JavaScript
Michael James Scharen

michaelsbookcorner.com
November 16, 2021

It is frustrating trying to track down living examples for any web development code close to what we need. There is plenty to aid in building up skills, but yet another example will not hurt.

A previous incarnation of the website offered both a Buy Now option and shopping cart options. These may recur in the future, but as of this writing, the single item (e-book or audiobook) via NowPayments.io is what is on offer. This has the widest appeal and flexibility before other options are added. So the ingredients for establishing a successful order are the following.

Michael’s Book Corner, at this time, presents a landing page for each book offering. As these are AMPHTML formatted, they present a difficulty in using custom JavaScript, so the purchase is made through another page called the buynow page presented in the amp-iframe as a bypass. AMPHTML fences off pages included in their iframe so javascript may be used as one ordinarily does. Once the author figures out how to insert custom JavaScript into amp-iframe, then this intermediate step will disappear. Any help in this direction is greatly desired.

Thus, all of the action for this article will take place on the buynowAges.html page using the book For the Ages and include a buynowAges.js file to to the work. Granted, one should be able to easily create one .js file for all products, but for now a dedicated file for each product is just fine. Actually, this approach makes it easier to write the article and explain the salient points. We code because we have to, not because we want to…

Gathering Customer Data

Only two pieces of information are needed from the customer in our case. The book is known -- as the page is dedicated to that title. The format is needed, i.e. .mobi e-book, .epub e-book, or audiobook. These are input via radio buttons disguised as check marks. The feature for only one choice being allowed via radio button with the same name takes away all ambiguity or double ordering. The other piece of information is a valid e-mail address for delivery of digital products once the order has been processed. At present, an automated method of order fulfillment has not been implemented upon settling accounts. This is for the future. Customers are on notice that invoices will no longer be valid after 24 hours and cryptocurrency customers should be used to this idea.


Fig.1 - The landingAges.html page as main part of website. The green Buy button allows interaction with the order gathering and processing page below.

Fig.2 - The buynowAges.html page for customer order.

With customer’s choice of book format and delivery e-mail entered, they only need to click the order button. One might notice the placeholders below the submit button indicating the delivery email address, invoice address, order number, etc. In the process of crunching through the invoice request, etc., these will be replaced also as a confirmation. A link to the invoice matched to the delivery email address will appear on the page as well as in the confirmation e-mail delivered to Michael’s Book Corner and to the customer. Either link (from email or on site) will open up the invoice in a new tab of the browser. This is so the customer is not jettisoned from the page. The invoice opens in the NowPayments.io website page, not the Book Corner page.

Generating Invoice & Order Confirmation

Granted, the following algorithm will not be considered elegant programming by the veterans out there and even appalling to some, but should be easily followed by us novices. Improvements will be made when the flogging ceases. Issue number one on the list to repair is the inline onclick call to the javascript function processOrder() with the submit button. The javascript file buynowAges.js has been loaded with global variables being initialized (also frowned upon, I’m sure). These variables are required through several functions and are reinitialized at the end in case the customer wished to place another order through the same page. Perhaps one might want both the ebook and the audiobook to follow along.

The function processOrder() gathers the order information from the input page buynowAges.html for use in proceeding to the next steps. The email address is checked for syntax and the processing proceeds to createOrder(). This function uses the call for the time via Date.now in milliseconds and shifts it to the nearest second. Now there is a unique sequential order number with the date and time being added for the record.

Next comes the real meat and potatoes part of order processing. The information generated previously is then fed into the body of an API call to NowPayments.io. The variable requestOptions is where all of the data to be sent to NowPayments in the invoice request is formatted. The call for a new invoice is sent via javascript fetch in our case. In the fetch command, only the required URL and requestOptions are now needed, as the work has been done above. Vendors need to obtain an API key from NowPayments.io once their accounts have been established with wallets. To allow the greatest flexibility for the customer, it is very important that the first wallet(s) chosen have historically low exchange rates and processing fees. Choosing something like Bitcoin will not work for everyday transactions. Until NowPayments adopts the Bitcoin Lightning Network (assuming there are no issues) then BitCoin or others with high transaction fees come down to everyday levels. The API key is in the headers section for fetch.

This is the part that is still murkey for me, i.e. not understood. The key of json.invoice_url passed back from NowPayments does not seem to be available outside of my function! However, when the functions updateOrderInfo() and orderEmail() are called from within pullInvoice() then everything is just wonderful. Let’s hope the more enlightened out there can send me some wisdom on this. The HTTP Fetch is still rather mysterious. Getting back to the action, the function updateOrderInfo does the courtesy of changing out the text below the submit button on the order page with a link to the invoice, MBC order number, and a confirmation of the customer’s email address.

With all of the information available, matching e-mails are then sent back to Michael’s Book Corner and to the customer. This email has all of the information, e-mail address, product/format, price, day and time of the order, order number, and a link to the invoice. This email function is powered by a very handy utility for generating e-mail through SmtpJS.com. There one can get a token to use their functions for sending an e-mail. Just include their script in the header of the page doing the processing. We use our general shipping email and one should not use an email that could not be replaced. Needless to say, there have been no issues with security for our little website.


Fig.3 - Order confirmation e-mail from Michael's Book Corner or michaelsbookcorner.com.

As stated earlier, the link for the invoice will take the customer to the NowPayements.io website. However, the invoice information is clearly marked as Michael’s Book Corner per direction in the invoice request. It contains the item ordered, price, and MBC order number. There should be no question for the customer. The customer must be instructed to enter the delivery email address into the invoice for a confirmation the transaction has completed successfully.


Fig.4 - Sample invoice generated via Buy Now sale through michaelsbookcorner.com. Sample invoice generated via Buy Now sale through michaelsbookcorner.com

Let’s hope that for others who struggle through learning to code our own websites that this article was of some help. Download links are provided for both the javascript and HTML portions of the web page for reference. This is much easier than trying to refer to it directly in the article.

Download the JavaScript file here.

Demo JavaScript

Download the HTML file here.

Demo HTML