Help center

Learn how to sell online with Checkout Page

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:

  1. Go to your Checkout Page dashboard and click on your checkout
  2. 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.

image-bf03.png

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.

image-bf9c.png

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.

image-748d.png

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.

image-50c0.png

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.

image-6f8b.png

Make sure to scroll down to hit Save and save your changes.

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

image-e086.png

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.

image-f3de.png

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.

image-3fe0.png

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:


Have a question about
Checkout Page?