How to customize invoice branding in Stripe?

How to Customize Invoice Branding in Stripe

 

Step 1: Access Your Stripe Dashboard

 

Begin by logging into your Stripe account. Once logged in, you'll be taken to the Stripe Dashboard, which serves as your control center for all Stripe functionalities.

 

Step 2: Navigate to the Branding Settings

 

From the Stripe Dashboard, follow these detailed steps:

• Click on the "Settings" option in the left sidebar
• In the Settings menu, select "Branding"
• You'll find a section specifically for "Invoice branding" which allows you to customize how your invoices appear to customers

 

Step 3: Customize Your Basic Brand Settings

 

In the Branding section, you can customize several basic elements:

• Upload your company logo (recommended size: 128x128px or larger with a 1:1 aspect ratio)
• Set your brand color (this will be used for buttons and highlights on invoices)
• Enter your business name as you want it to appear on invoices
• Add an icon that will appear in browser tabs when customers view your invoices

 

Step 4: Customize Invoice Templates Using the API (Advanced)

 

For more advanced customization, you can use Stripe's API to create and modify invoice templates:

const stripe = require('stripe')('sk_test_your_secret_key');

// Create a new invoice template
const template = await stripe.invoiceTemplates.create({
  name: 'Custom Template',
  components: {
    header: {
      type: 'text',
      text: 'Thank you for your business!',
      settings: {
        fontSize: 'medium',
        alignment: 'center'
      }
    },
    footer: {
      type: 'text',
      text: 'Contact us at [email protected]',
      settings: {
        fontSize: 'small',
        alignment: 'center'
      }
    }
  }
});

console.log('Created template:', template.id);

 

Step 5: Customize Email Templates

 

You can also customize the emails that are sent with your invoices:

• Still in the Branding section, scroll to "Email templates"
• Customize the "From" name that appears in emails
• Edit the email subject line template
• Customize the email body content

 

Step 6: Using the API to Set Custom Fields on Invoices

 

To add custom fields to your invoices programmatically:

const stripe = require('stripe')('sk_test_your_secret_key');

// Create a new invoice with custom fields
const invoice = await stripe.invoices.create({
  customer: 'cus_customer_id',
  custom\_fields: [
    {
      name: 'Purchase Order',
      value: 'PO-12345',
    },
    {
      name: 'Project Reference',
      value: 'Project X',
    }
  ],
  collection_method: 'send_invoice',
  days_until_due: 30,
});

console.log('Invoice created with custom fields:', invoice.id);

 

Step 7: Add Custom CSS with the API (Advanced)

 

For completely custom styling, you can apply CSS to your hosted invoice pages:

const stripe = require('stripe')('sk_test_your_secret_key');

// Update account settings with custom CSS
await stripe.accounts.update('acct_your_account\_id', {
  settings: {
    branding: {
      custom\_css: \`
        .Header { 
          background-color: #f5f5f5; 
          padding: 20px;
        }
        .InvoiceTitle { 
          font-family: 'Arial', sans-serif; 
          color: #333366; 
          font-size: 24px;
        }
        .InvoiceTable th { 
          background-color: #e0e0e0; 
        }
      \`
    }
  }
});

 

Step 8: Configure Invoice PDF Settings

 

To customize the PDF version of your invoices:

• In the Branding section, find "Invoice PDF settings"
• Choose whether to include a payment page link on the PDF
• Select whether to display payment instructions
• Choose to include or exclude your company address

 

Step 9: Test Your Customized Invoice

 

Before finalizing your changes, it's crucial to test how your customized invoices look:

const stripe = require('stripe')('sk_test_your_secret_key');

// Create a test customer
const customer = await stripe.customers.create({
  email: '[email protected]',
  name: 'Test Customer'
});

// Create a test invoice
const invoice = await stripe.invoices.create({
  customer: customer.id,
  collection_method: 'send_invoice',
  days_until_due: 30,
});

// Add a line item to the invoice
await stripe.invoiceItems.create({
  customer: customer.id,
  amount: 1000, // $10.00
  currency: 'usd',
  description: 'Test product',
  invoice: invoice.id,
});

// Finalize the invoice
const finalizedInvoice = await stripe.invoices.finalizeInvoice(invoice.id);

// Send the invoice (optional for testing)
const sentInvoice = await stripe.invoices.sendInvoice(invoice.id);

console.log('Test invoice sent:', sentInvoice.id);

 

Step 10: Save and Apply Your Branding Settings

 

Once you're satisfied with your customizations:

• Click the "Save" or "Save changes" button at the bottom of the Branding page
• Your new branding will be applied to all future invoices
• Note that existing invoices that have already been sent will not be updated with the new branding

 

Step 11: Set Default Payment Terms (Optional)

 

You can also set default payment terms for all your invoices:

const stripe = require('stripe')('sk_test_your_secret_key');

// Update your account settings with default payment terms
await stripe.accounts.update('acct_your_account\_id', {
  settings: {
    payments: {
      statement\_descriptor: 'YOUR COMPANY NAME',
      default_payment_terms: {
        days_until_due: 30
      }
    }
  }
});

 

Step 12: Monitor Customer Engagement (Recommended)

 

After implementing your custom branding, it's valuable to monitor how customers interact with your invoices:

const stripe = require('stripe')('sk_test_your_secret_key');

// Retrieve invoice events to track customer engagement
const events = await stripe.events.list({
  type: 'invoice.sent',
  limit: 10
});

// Process events to analyze when invoices were viewed
events.data.forEach(event => {
  console.log(`Invoice ${event.data.object.id} was sent at ${new Date(event.created * 1000)}`);
});

// You can also track when invoices are viewed
const viewEvents = await stripe.events.list({
  type: 'invoice.finalized',
  limit: 10
});

viewEvents.data.forEach(event => {
  if (event.data.object.status === 'open') {
    console.log(`Invoice ${event.data.object.id} was viewed at ${new Date(event.created * 1000)}`);
  }
});