Customize Bitcoin Checkout Site for BTCPay
Create custom Bitcoin checkout page for BTCPay
How to create a custom Bitcoin checkout page for the BTCPay server. With your logo, your colors and in your individual design.
Set up and administer BTCPay Shop In addition to the design, it explains other setting features and functions that can be displayed to the customer on the Bitcoin Checkout page.
Customize Bitcoin Checkout Page for BTCPay Shop
How to create a custom Bitcoin checkout page for your BTCPay store. The payment page in the design of your online store based on the BTCPay server.
Standard BTCPay Checkout Seite
Customized BTCPay Checkout Page
With BTCPay Server you can customize the payment page. Your customers will be shown a Bitcoin checkout page that adapts to the design and CI of the online store.
The Bitcoin Checkout page is composed of the logo and the design, which is stored as a CSS file on the server.
You can either place the logo and CSS file on the BTCPay server or point it as a path to another server.
To design the Bitcoin checkout page, go to the Stores -> Manage Stores ->Ckeckout experience section.
Deposit your own logo
In the first field “Link to a custom logo” the path where the logo is located on another server is specified. Just take the url to your logo on your homepage.
For example, we took the logo of Coincharge, which is stored on the server as follows:
Accordingly, this url was deposited.
Store own color values
In the second field “Link to a custom CSS stylesheet” the path where the CSS stylesheet has been stored is entered.
To do this, you first need to create your own CSS stylesheet. Ideally, you take an existing template and customize it to your liking.
On the page: https://btcpay.coincharge.io/LocalStorage/c7c4f2c1-3d30-4825-88df-d02a9bdd89a8-coincharge.cssyou get a CSS template that you can save as a text file and adjust to your individual values.
At Coincharge, we would like to use the two color values from our logo on the checkout page as well. The color orange is the color value #F7A600 and blue is #6193C9
We have created two templates as an example:
If you click on the link of the CSS file, then you get the CSS file displayed. Copy the content to a text file and change the color values #F7A600 (orange) and #6193C9 (blue) to the color values that are in your logo.
Then save the file as a CSS file on your Internet server and enter the path in the “Link to a custom CSS stylesheet” field.
If you run your own BTCPay server, you can also create this file on your BTCPay server via Server Settings >Files.
For testing purposes, you can store the above mentioned paths of the Coincharge CSS file, so that you can see how it works.
In the “Custom HTML title to display on Checkout page” field you can specify which title should be displayed on the page. This can be for example the name of the store page or the url.
The “Default payment method on checkout” field is used to specify which payment method will be set as default. If you offer your customers payment via Bitcoin and Lightning and define Bitcoin as the default, then Bitcoin will be displayed first when the page is called up. The user can switch to the other currency if necessary.
Accordingly, the default language is set at “Default language on checkout”.
The field “” is checked if you want to force the input of an email address. This makes sense if there can be credits due to the business model. Then you can contact the customer via this email address to ask for the Bitcoin address for credits (Refund).
If you want to set a minimum amount above which a Bitcoin payment will be offered, you can set this amount in the field “Do not propose on chain payment if the value of the invoice is below…”. Bitcoin payments are made via the blockchain and are referred to as on-chain. Lightning payments are processed cheaply via a sidechain and are therefore also referred to as off-chain payments. Since Lightning payments are predestined for micropayments, only Lightning payments would be possible if the specified threshold is not met.
Accordingly, “Do not propose lightning payment if value of the invoice is above…” defines a maximum limit up to which lightning payments are possible.
If you want to display the invoice amount in Satoshi (the smallest Bitcoin unit) for Lightning payments, then you have to check “Display lightning payment amounts in Satoshis”.
If you check the “Show recommended fee” box, the network fees that are recommended will be displayed. Then at the bottom of the payment page for the customer, for example, there is the recommendation “Recommended fee: 10 sat/byte”.
This would be the fee you would have to pay to be in the next block if you set the 1 in “Recommended fee confirmation target blocks”.
It is recommended to adapt the checkout page to the design of your own site. However, if you don’t know how to create a CSS style sheet, you can easily add your own logo and text.