Create Bitcoin Checkout Page for BTCPay

This post is also available in: German

Bitcoin Checkout Seite für den BTCPay Shop anpassen

team

Set up and administer BTCPay Shop

This post explains how to customize the Bitcoin Checkout page on the BTCPay server to the individual design of the shop. In addition to the design, other settings and functions are explained, which can be displayed to the customer on the Bitcoin Checkout page.

Bitcoin Checkout Page for the BTCPay Shop Customize

How to create an individual Bitcoin Checkout page for your BTCPay Shop. The payment page in the design of your online shop based on the BTCPay server.

Standard BTCPay Checkout Page

BTCPay Checkout Page

Custom BTCPay Checkout Page

PaymentPage

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

Bitcoin Checkout Page

Create Bitcoin Checkout Page

 

Insert your own logo

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:

https://coincharge.io/wp-content/uploads/2020/01/coincharge_logo_300.png

Accordingly, this url was deposited.

Store your own color values

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:

Checkoutpage 1

Checkoutpage 1

Checkoutpage 1

 

https://demo.coincharge.io/LocalStorage/9d04d41c-fe4e-4f6b-8580-8d54318c56d4-checkoutpage1.css

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.

BTCPay Server Settings Files

BTCPay 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.

HTML Title

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