Bitcoin Payment Widget Setup : Blockonomics

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 the 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
extra_data: Any custom data
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: '[email protected]'
    });
  }

  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

Quantity:

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"></div>
<script src="https://blockonomics.co/js/pay_widget.js"></script> 
<script>
  Blockonomics.widget({
    msg_area: 'blockonomics_widget',
    uid: 'e4e70ddd65494fa6',
    email: '[email protected]',
    quantity: 2
  });
</script>

Amount:

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

<div id="blockonomics_widget"></div>
<script src="https://blockonomics.co/js/pay_widget.js"></script> 
<script>
  Blockonomics.widget({
    msg_area: 'blockonomics_widget',
    uid: 'e4e70ddd65494fa6',
    email: '[email protected]',
    amount: 20
  });
</script>

Add any custom data

We can supply any custom data to the order using the extra_data parameter. This is useful for adding customer user id's or special order notes.

<div id="blockonomics_widget"></div>
<script src="https://blockonomics.co/js/pay_widget.js"></script> 
<script>
  Blockonomics.widget({
    msg_area: 'blockonomics_widget',
    uid: 'e4e70ddd65494fa6',
    email: '[email protected]',
    extra_data: 'user10'
  });
</script>

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: '[email protected]'
    });
  };
</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>

Changing the Appearance of the Payment Widget

You can easily change the appearance of the Blockonomics payment widget using CSS. Please see the below examples for some ideas of the customizations that can be made to match your desired look and feel. Simply copy the snippets below and add them to the CSS of your page:

Remove the border

#blockonomics_widget {
    border: none !important;
}

Change the border color

#blockonomics_widget {
    border: 1px solid #f1f1f1 !important;
    display: none; /* Hide the border until the widget is shown */
}

Change the background color

#blockonomics_widget {
    background: #7e7e7e !important;
}

Change the text color

#blockonomics_widget {
    color: #5f927d !important;
}

Change the width of the widget to fit the container

#blockonomics_widget {
    width: 100% !important;
}

Change the width of the widget to a fixed width

#blockonomics_widget {
    width: 400px !important;
}

Using Payment Widget with React/Vue JS

Since the JS for the Payment Widget needs to be loaded before it can be initialized, it can get a little tricky to do it with Package Managers and Frameworks like ReactJs and VueJS, to use the Payment Widget with React or Vue, please follow the article here.

Bitcoin Payment Widget Setup Print