Bitcoin Payment Button
A Bitcoin Payment Button is the simplest way to accept Bitcoin payments on your website. In most cases, the Bitcoin Payment button is used to receive donations. A Bitcoin Payment Button can also be used to sell individual products that do not require an online store system with shopping cart functionality.
The BTCPay server offers a pay button. In this post, we will see how this Pay Button can be used as a Bitcoin Payment Button and a Bitcoin Donation Button.
In this post we describe how you can receive donations using the BTCPay server (Bitcoin Donation Button) and sell products using the Bitcoin Payment Button.
Instead of just publishing your own Bitcoin address on the homepage, you can display a Bitcoin payment button and the visitor of the website can choose an amount himself and make his donation.
Table of contents
Pay Button
If a BTCPay Store has been created on the BTCPay Server, you will find the Pay Button menu item in the left menu bar.
The Pay Button function can be used to create a wide variety of applications. We want to provide an overview of the different application possibilities so that these applications can be replicated and adapted to individual requirements.
Essentially, two application scenarios can be mapped. One application is a Bitcoin payment button for selling individual products. The second application is a Bitcoin Donation Button to accept donations on its website.
The Pay Button is also suitable for testing and trying out a BTCPay Store. For example, to make a test order and see how the payment page looks like, if the payment methods work properly and if the incoming payments are credited correctly to the respective wallet.
When you go to the Pay Button menu item, you get a warning message.
It is noted that you should always operate the Pay Button alone. If you run an online store on your website and also want to include a Bitcoin Donation Button, it is better to create two different BTCPay Store and use a separate BTCPay Store for each application.
Recommendation: Create a separate BTCPay store for each of the following applications.
Before we get into the individual sections, let’s first look at the last section Generated Code. All settings that are made now are directly implemented as HTML code. This HTML code can be copied and integrated 1:1 into any website.
The Pay Button page is intended for designing Payment Button and Donation Button and getting the corresponding HTML code as a result. The settings made are also not saved, but are overwritten when another button is created. It is more of a payment button generator.
It is recommended to experiment with the settings and copy the generated HTML code into an empty web page and look at the result.
For the customer, a Bitcoin payment button is just a button that they can click on, triggering a call to the payment page for the payment.
In advance, under General Settings, it is possible to specify how much the customer should pay. In our example opposite, we have set €10.
We have specified Support Ticket as the purpose of use. This description will be displayed later in the Payment Page. In the overview of all incoming payments we can assign the payment thanks to the purpose or order ID.
The result of our settings can be found under Generated Code as HTML code and looks like the button on the right.
Click on the Pay with BTCPay button on the left and see what happens.
This type of payment buttons are suitable when selling individual products and embedding this type of Bitcoin payment button next to the product description. It is suitable for products that are sold individually and thus no shopping cart function is needed.
Bitcoin Payment Button with Email Address
But how do you send the customer the goods now? There is no further information about the customer to send the goods. In order to communicate with the customer by email, it is possible to have the customer’s email address.
The Bitcoin payment button is interesting for the sellers who want to sell digital products and send them to the customer via email.
You present your product on the website and when paying the buyer gives his email address. The file, PDF or access code will be sent to this email address later.
The Bitcoin Payment Button can also be used to activate an account in a forum or blog.
The user is offered different payment buttons with different prices. When paying, he enters his email address, which is, for example, the same email address with which the customer has registered in the forum, blog or service.
This email address can be used to activate the account or send the file, PDF or access code.
In the settings of the BTCPay Store, in the Checkout Appearance area, the setting can be made that an email address must be stored by the customer within the payment page.
If this is activated, the customer enters his email address during payment, to which the store operator can then send passwords, access codes or other products after successful payment.
How a Bitcoin payment button including the input of an email address looks like can be seen via the button on the right.
Display Options
In the Display Options section you can change the settings for the appearance of the buttons.
The first setting option with Use Modal does not concern the appearance of the button, but the presentation of the payment page. With Use Modal, the payment page does not open as a standalone page, but acts as if I were floating payment page over the previous page.
With Customize Pay Button Text the text inside the pay button can be customized. The BTCPay logo will also disappear. A view of how the button will look is displayed in the Preview window.
In addition to the pay button text, you can also add your own logo.
In the Pay Button Image Url field, enter the link to the image that should be displayed instead of the BTCPay logo.
We have used the Bitcoin logo in our example. Likewise, the size of the corresponding button can be modified in the Image Size area.
The Bitcoin payment button will look like this:
Bitcoin Donation Button
When creating the Bitcoin Payment button, the Fixed Amount setting was used as the Button Type. To create a Bitcoin Donation Button, we have the other two Button Types available.
Once with a free amount input (Custom Amount) or as a slider.
If we select the Type Custom Amount button, we get the possibility to specify an amount range. The base amount of €10,- we had set under General Settings. now the customer can change the amount up or down in one-euro increments.
If you want to allow free input of amounts instead of the plus and minus buttons, activate “Usa a simple input style”. If you want the Bitcoin Donation Button and the amount input to be placed side by side instead of on top of each other, then activate “Fit Button inline”
Under Generated Code we can find the HTMl code for our website. The result of our settings will look like this:
Donation Button with Slider
Instead of the plus-minus buttons, the slider moves the amount to the right or left.
This is what the Bitcoin Donation button with slider looks like then.
Payment Notifications
In the Payment Notification section you can make settings if you want to be notified about a payment.
With Server IPN, a URL can be stored to which the data is to be sent.
For Email Notification, an email address to which a message is sent when there has been a payment.
With Browser redirect, a page can be stored that is displayed to the payer after successful payment.
In the Advanced Options section you can set the language of the payment page that will be displayed to the customer. However, it is better to set the language in the Payment Page settings in the Store Settings section.
Summary
The Pay Button function is very suitable for testing the payment page and payments in the respective BTCPay store.
As a standalone BTCPay store, the Pay Button can be used as a payment button to receive payments and donations with a fixed or variable amount.
Copying the generated HTML code to your own website is done in no time. Thus, the Bitcoin Payment Button is the ideal entry-level solution. However, there are narrow limits in the design. For example, you cannot change the background color of the button. For those looking for a more customized solution, the article: Receive Bitcoin Donations or the BTCPayWall
Leave a reply