Design your checkout
In this help article, we’ll cover designing the look and feel of your checkout.
Appearance
Checkout Page makes it easy for your to customize your one page checkout. Add your logo and colors, change the text, or even change the design with CSS.
In just a few clicks, you can make your checkout match your brand or website design.
To change the appearance of your one page checkout:
- Go to your Checkout Page dashboard and click on your checkout
- Open the Design tab and go to the Appearance section
Business settings
This is where you can add a store name, logo, site link, and more.
First, you have to add this information in your Business settings and then you can choose the information you'd like to show on each individual checkout.
Your Business settings can change the look and feel of your checkouts, payment links, emails to customers, and your customer portal.
Learn how to add your business settings here
Once you have added your business information, you can choose what to show on your one page checkout by ticking the boxes in the Appearance section.
Product text alignment
Aligns the product text in your one page checkout.
- Product name
- Price
- Store name
- Description
Left alignment checked by default.
Check Center to center and align your product text in your checkout.
Make sure to scroll down to hit Save and save your changes.
Show price breakdown
Tick this box to show your customer the total amount due today.
Please note: This feature is only available for the payment plan and subscription checkouts.
Make sure to scroll down to hit Save and save your changes.
Pay button background color
This is the color of your pay button background and text color in your checkout.
Pay button background defaults to black (#000000).
Use the color picker or type your Hex value to add your color.
If you change the background color, click X to reset the background color back to black (#000000).
We recommend using a pay button background and text color combination that has enough contrast to make the text easy to read.
Make sure to scroll down to hit Save and save your changes.
Pay button text color
The color of the text in your pay button.
Your pay button text color defaults to white.
Choose between white or black text.
Make sure to scroll down to hit Save and save your changes.
Payment link & QR code background color
This is the background color of the checkout when viewing your checkout from a payment link or QR code.
The background color of checkout defaults to a light grey (#F9F9F7).
Use the color picker or type your Hex value to add your color.
If you change the background color, click X to reset the background color back to light grey (#F9F9F7).
Make sure to scroll down to hit Save and save your changes.
Badges
Badges help establish trust through association with Stripe.
We recommend keeping the Stripe badges visible as your customers are more likely to make purchases when they trust their payment is secure.
Show ‘Payments are secure & encrypted’
Let your customers know that their payments are secure & encrypted.
Checked and visible by default, but you can uncheck it to remove this badge.
Make sure to hit Save and save your changes.
Show ‘Powered by Stripe’
Let your customers know that their payments are processed by Stripe.
Checked and visible by default, but you can uncheck it to remove this badge.
Make sure to hit Save and save your changes.
Currency formatting, custom CSS, custom labels
Now that you’ve changed the look and feel of your checkout. It’s time to learn more about the next steps:
