Design your page

In this help article, we’ll cover designing the look and feel of your checkout or form.

Checkout Page makes it easy for you to customize your one-page checkout or form. 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 or form match your brand or website design.

To change the appearance of your one-page checkout or form:

1. Click Pages from the dashboard, and then click on your checkout, event, or form page to enter the edit view
2. Click the Design tab from the top menu options

Layout

This is where you can change the layout of your page both as a hosted page and a pop-up.

Center

The following screenshot shows the page on a Hosted page - Center layout, but there are two other Layout options: Double and Split.

1. Background

You can set the background to be a color (which can be determined in the Colors tab), or to be an Image - which will prompt the ability to upload an image as your background as shown below:

2. Text Alignment
You can also align the text to the Left or to the Center. The alignment to the Center is shown below:

Double

The following shows how the page looks like as the Double layout:

There are different layout customization options than when the layout was centered.

1. Checkout position

By default, the checkout contents were located on the right-side. You can change the checkout contents to instead be located on the left-side.

2. Background width

By default, the Double layout is Half, which only shows the background on the side the product/service information. However, selecting the background width of Full shows the background behind the checkout content side as well.

3. Logo Alignment

Bu default, your store logo is aligned to the left. You can instead align it to the center of one half of the page.

Split

The following shows how the page looks like as the Split layout:

The layout customization options are the same when the layout was in the Center and as a Double.

Page type

When you've first set up your page, you've chosen if the page is a Hosted Page by Checkout Page or if it will be added to your site. You can change this in the Design - Layout settings by clicking change.

There will be a pop-up that allows you to choose if you'd like the page to be a Hosted Page or Add-to-site.

If the page is Add-to-site, you will have the option to choose the Embed layout or Pop-up layout:

Colors

You can change the colors of the elements of the page with the color picker or type your Hex value to add your color. The following elements that you can customize a color for are:

• Page background color (only available if the page is hosted)
• Variant background color
• Variant selected background color
• Variant selected border color
• Button background color
• Button text color

The changes will automatically be saved.

Page background color (only available if the page is hosted)

This is the background color of the checkout when viewing your checkout or form as a page.

The background color of checkout defaults to a light grey (#F9F9F7).

Use the color picker or type your Hex value to add your color.

Button background color

The button background defaults to black (#000000).

If you change the background color, click X to reset the background color back to black (#000000).

We recommend using a button background and text color combination with enough contrast to make the text easy to read.The changes will automatically be saved.

Button text color

The color of the text in your pay button and your pay button text color defaults to white. You can choose any color instead.

Elements: show or hide

You can show or hide the Elements on the page by selecting or deselecting the boxes. The Elements include:

• Logo
• Product title
• Price
• Setup fee
• Store name
• Price breakdown
• Price on button
• Secure payments text
• Powered by Stripe

Badges (checkouts only)

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.

The changes will automatically be saved.

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.

Custom CSS

You can make further customizations to the page with CSS code.

Click here to learn about Custom CSS.

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

Custom labels

You can also translate your checkout labels to target a specific foreign market.

Click here to learn about Custom labels.

Currency formatting

You can select the format in how your currency is shown by selecting an option from the drop-down menu.

The currency formatting is shown in the price calculations at the bottom of the page. The following screenshot shows the currency formatting "United States":

The following is what the currency format looks like in the "Switzerland (French)" format (keep in mind that the currency itself is still US, and that this is just customizing the currency format):