Paper offers many ways to customize the colors and buttons associated with your Paper checkout.

Dashboard and API Checkouts

If you created a Dashboard Checkout or API Checkout, you can customize settings like dark mode, accent color, and button shape right from your Paper dashboard. You can find these setting in the developer section of your dashboard. Choose a checkout, click edit and scroll down to the "Custom Branding" section.

11021102

Access the Custom Branding setting from your Paper dashboard.

React SDK Checkouts

If you created a React SDK Checkout, you can customize your branding and look extensively. The entire checkout flow is white-labeled.

See a code example of a customized checkout using the React SDK below. You can also play around with our sandbox environment for the PaperCheckout component.

<PaperCheckout
  checkoutId='70e08b7f-c528-46af-8b17-76b0e0ade641'
  display='POPUP'
  options={{
    width: 400,
    height: 800,
    colorBackground: '#232323',
    colorPrimary: '#42ff4f',
    colorText: '#f1fde3',
    borderRadius: 6,
    fontFamily: 'Open Sans',
  }}
/>

The table below show possible customizations for the options argument. All of the arguments here are optional.

Prop

Type

Description

width

number (default = 400px)

The width of the checkout. Valid for POPUP, MODAL, DRAWER.

height

number (default = 800px)

The height of the checkout. Valid for POPUP, MODAL.

colorPrimary

string (in hex, e.g. #cf3781)

The primary brand color for buttons and links.

colorBackground

string (in hex, e.g. #cf3781)

The background color of the page.

colorText

string (in hex, e.g. #cf3781)

The color for text on the page and UI elements.

borderRadius

string (e.g. 0 for sharp corners, 12px for rounded corners, 24px for pill shape)

The roundness of buttons and input elements.