Colors and Buttons

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.

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.