Pre-requisite: Please make sure you have completed the setup of API keys.

Going through the Sample

  1. Under “Add new API”, click on “Learn from this sample…web-api sample link
  2. You will see a new window (below). Right click on the “Pay with Bitcoin” picture and “Save As”. This will be the button that customer will press to pay with bitcoin. After saving the picture, now click on it.
    paywithBitcoinWindow
  3. You will see a frame that pops up (below). Once a user scans the QR code, the bitcoin payment will be completed.
    payment window

Setting up your payment window

We will be using Google Chrome to examine the page source

  1. Go to “Learn from this sample…” and right-click your mouse to “View Page Source”.
  2. What you need to look in particular is the ProceedBitcoinPayment function. Copy and Paste the code below javascript and CSS in <head> of payment page.
Dependencies: JQuery 1.10.*, bootstrap.js, coinpip-api.js

 function ProceedBitcoinPayment() {
  coinpip.RequestPayment('83f9640ce2c8490aa7dffe715bd293ff', // Your API ID
  {
   Title: 'Pay with bitcoins',
   FiatAmount: 100.4,
   // BtcAmount: 0.0001, // use in case if FiatAmount is skipped
   CustomerEmail: 'mystore@myemailaddress.com',
   Reference: 'Some textual reference'
  });
}
</script>

3. You first need to change the API ID, which is listed in step (6) of this post. Replace “83f9640ce2c8490aa7dffe715bd293ff”, with the API code. The “FiatAmount”, “CustomerEmail”, and “Reference” should also be variables. The code below shows how to use it. You can try it out by putting it into the <body> of your payment page.


<div class="all_center">
 Amount: <input type="text" id="amount" /><br/>
 Your email for receipt (optional): <input type="text" id="customer-email" /><br/>
 <input type="image" style="width: 250px;"style="" src="https://wallet.coinpip.com/bb.png" value='Pay with bitcoins' onclick="ProceedBitcoinPayment()" />
</div>

If there’s still anything you don’t quite understand, please email merchants@coinpip.com