This post is also available in: German
Standard BTCPay Checkout Page
Custom BTCPay Checkout Page
With the BTCPay server you can customize and customize the payment page. Your customers will see a Bitcoin Checkout page, which adapts to the design and CI of the online store.
The Bitcoin Checkout page consists of the logo and 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 to another server as a path.
To design the Bitcoin Checkout page, go to the Stores – > Manage Stores – > Ckeckout experience
The first “Link to a custom logo” field indicates the path where the logo is on another server. 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.
The second field “Link to a custom CSS stylesheet” enters the path where the CSS style sheet was placed.
To do this, you first have to create your own CSS style sheet. Ideally, you will adopt an existing template and adapt it to your own wishes.
At Coincharge, we would also like to use the two color values from our logo on the checkout page. The color orange is the color value #F7A600 and blue is #6193C9
We created two templates as an example:
If you click on the link of the CSS file, you will see the CSS file. 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 paths from the Coincharge CSS File with you so that you can see how it works.
In the field “Custom HTML title to display on Checkout page” you can specify which title should be displayed on the page. This can be, for example, the name of the shop page or the url.
The “Default payment method on checkout” field determines which payment method is set as the default. If you offer your customers payment via Bitcoin and Lightning and define Bitcoin as the default, then bitcoin is displayed first when you go to the page. The user can switch to the other currency if necessary.
Similarly, the default language is set for “Default language on checkout”.
The field “” is hooked if you want to force the entry of an email address. This makes sense if credits can be made 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 from which a bitcoin payment is offered, this amount can be set in the field “Do not propose on chain payment if the value of the invoice is below…” Set. Payments by Bitcoin are made via the blockchain and are referred to as on-chain. Lightning payments are processed cost-effectively via a sidechain and are therefore also referred to as off-chain payments. Because Lightning payments are predestined for micro payments, only Lightning payments would be possible if the limit was exceeded.
Accordingly, “Do propose not lightning payment if value of the invoice is above…” is defined. a maximum limit up to which Lightning payments are possible.
If payments via Lightning show the invoice amount in Satoshi (the smallest Bitcoin unit), then a check must be set for “Display lightning payment amounts in Satoshis”.
If you activate the “Show recommended fee” field, the network charges that are recommended will be displayed. Then at the bottom of the payment page for the customer, for example, 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 at “Recommended fee confirmation target blocks”.
It is recommended to adjust the checkout page to the design of your own page. If you don’t have the knowledge of creating a CSS style sheet, you can easily store your own logo and text.
This post is also available in: German