Developer Resources

🎨 How To: Whitelabel The Payment Experience

🎨 Customize the Coinflow Pre-built UI to match your branding guidelines.

  1. Log in to the Merchant Dashboard and navigate to Theme & Brand.
  2. Change the colors on the site to match your branding.

📘 Any changes to branding will effect both Checkout and Withdraw flows

You can modify the following properties to match the look and feel of your site:

  • Font - All Google fonts are supported
  • Corner Style
  • Colors
View of Theme & Brand Configuration Settings on the Merchant Dashboard
View of Theme & Brand Configuration Settings on the Merchant Dashboard

Example of How to pass custom theme prop

1import { CoinflowPurchase, MerchantStyle } from "@coinflowlabs/react";
2
3<CoinflowPurchase
4        merchantId="mello"
5        env="sandbox"
6        subtotal={{cents:100}}
7        theme={{
8          primary: '#6366f1',
9          background: '#ffffff',
10          backgroundAccent: '#f3f4f6',
11          backgroundAccent2: '#e5e7eb',
12          textColor: '#111827',
13          textColorAccent: '#6b7280',
14          textColorAction: '#ffffff',
15          font: 'Asimovian', // Pass a font supported by Google: https://fonts.google.com
16          style: MerchantStyle.Rounded,
17        }}
18      />

Checkout Customizations

Merchants using SDK version 4.4.0 or higher now have enhanced customization options, including the ability to:

  • Add a custom support email
  • Include customer information in the footer