The Blockonomics Payment Widget provides a HTML/JS widget that integrates seamlessly into your existing websites/order system. This document explains various ways to use bitcoin payment widget


Basic Interface and Usage


The following snippet of code gives the basic definition of the Payment Widget. You should insert it directly before the closing </body> tag on each page you want to load it:


<script src="https://blockonomics.co/js/pay_widget.js"></script>

<script>
Blockonomics.widget({
    msg_area: '<element_id>',
    uid: '<payment_button_uid>',
    email: '<customer_email_address>'
});
</script>
  • msg_area: This is the html element where the bitcoin payment related messages are displayed. You can specify DOM identifier of any span or div here. Bitcoin address for customer to pay to and other error messages are displayed here
  • uid: This is the uid of the payment button to use. Uid can be fetch by creating payment button from Merchants > Payment Button > Products
  • email: This is the email of customer who is buying the product


Other optional parameters (Depends on input fields enabled in the payment button)

  • quantity: Quantity of product being bought by customer
  • amount: Amount being paid (only applicable in donation mode)
  • name : Name of customer
  • address: Mailing address of customer
  • phone: Phone number of customer
  • custom_one: First custom field
  • custom_two: Second custom field
  • timer: Countdown timer for the payment (in seconds)


Examples

Create payment on button click

Most common use is to  attach the widget to a button onclick function, so that when clicks Pay with Bitcoin, he is shown the widget having payment details. Note that here we already have customer email details in our session so it is supplied directly to the widget via function call


<button id="pay">Pay with Bitcoin</button>
<div id="payment_area"></div>
<script src="https://blockonomics.co/js/pay_widget.js"></script>
<script>
  function pay() {
    Blockonomics.widget({
      msg_area: 'payment_area',
      uid: 'e4e70ddd65494fa6',
      email: 'customer@email.com'
    });
  }

  document.getElementById('pay').onclick = function() { pay() };
</script>


Fetch the customer email from an input

We can collect the customers email from an input field, session or cookie as in the example below.

<input type="email" id="email" placeholder="Email Address"/>
<button id="pay">Pay with Bitcoin</button>
<b><span id="bitcoinpay"></div><b>
<script src="https://blockonomics.co/js/pay_widget.js"></script> 
<script>
  function pay() {
    var email = document.getElementById('email').value;
    Blockonomics.widget({
      msg_area: 'bitcoinpay',
      uid: 'e4e70ddd65494fa6',
      email: email
    });
  }

  document.getElementById('pay').onclick = function() { pay() };
</script>


Supply a quantity or amount

We can supply a quantity to the payment widget to allow users to order more than one item. The quantity field must be checked from your product settings on Blockonomics.

<div id="blockonomics_widget" style="color:blue"></div>
<script src="https://blockonomics.co/js/pay_widget.js"></script> 
<script>
  Blockonomics.widget({
    msg_area: 'blockonomics_widget',
    uid: 'e4e70ddd65494fa6',
    email: 'customer@email.com',
    quantity: 2
  });
</script>

We can also alternatively supply an amount to pay via amount field (This only applies in donation mode).


Loading the Payment Widget asynchronously

The Payment Widget can be loaded asynchronously, which means that it does not block loading other elements of your page. The function assigned to window.blockonomicsAsyncInit is run as soon as the Payment Widget has completed loading. Any code that you want to run after the Payment Widget is loaded should be placed within this function.

<div id="bckwidget"></div>
<script>
  window.blockonomicsAsyncInit = function() {
    Blockonomics.widget({
      msg_area: 'bck_widget',
      uid: 'e4e70ddd65494fa6',
      email: 'customer@email.com'
    });
  };
</script>
<script async defer src="https://blockonomics.co/js/pay_widget.js"></script>

Payment Notifications

The function assigned to window.blockonomicsPaymentCallback is run as soon as the Payment Widget has received an unconfirmed bitcoin payment. Any code that you want to run after the Payment Widget has received payment notification should be placed within this function. Note this is only suitable for redirection to thank you pages which say something like Order is received. Don't use this to directly deliver your product as javascript is easily accessible to customer

 

<div id="bckwidget"></div>
<script>
window.blockonomicsPaymentCallback = function(payment) {
	document.getElementById('bckwidget').innerHTML = "Thanks! Received payment " +  payment.value/1e8 + " BTC via " + payment.txid;
};
</script>
<script async defer src="https://blockonomics.co/js/pay_widget.js"></script>