Checkout Design Guide

Welcome to Billie’s Checkout Design Guide!

In order to ensure customers understand the payment methods offered and have a consistent experience with Billie across multiple platforms, we have created this comprehensive step-by-step guide on how to display Billie on your checkout page.

Below you will find our Billie Badge, as well as the correct labels for Payment Descriptor, Additional Subheading, and Additional Payment Information. If you prefer to read the documentation in German you can follow this link.

24002400

Step 1: Add in the correct labels for payment information

Let's start with selecting the correct labels, which you can copy from the table below. You can choose between the two variants listed below:

  1. Payment Descriptor + Subheading + short Payment Information
  2. Payment Descriptor + NO Subheading + long Payment Information

The second variant should only be used if you have integrated Billie using your Klarna integration.

When choosing variant 2, please don’t forget to exchange the payment duration inside the Additional Payment Information according to the agreed conditions.


Variant 1 (default)

Payment Descriptor (DE)

Additional Subheading (DE)

Additional Payment Information (DE)

Rechnungskauf

Jetzt kaufen, später bezahlen.

  • Erst nach Erhalt der Ware bezahlen.
  • Rechnungen können Sie im Billie Käuferportal verwalten.

Payment Descriptor (EN)

Additional Subheading (EN)

Additional Payment Information (EN)

Pay by invoice

Buy Now, Pay Later

  • Pay after delivery.
  • You can manage your invoices in the Billie Buyer Portal.

Variant 2 (Paywall option only for Billie via Klarna)

Payment Descriptor (DE)

Additional Payment Information (DE)

Rechnungskauf

Erst kaufen, dann bezahlen. Beim Kauf auf Rechnung übernimmt die Billie GmbH gemeinsam mit der Klarna Bank (publ) die Zahlungsabwicklung. Nach Erhalt der Zahlungsinformationen haben Sie XX Tage Zeit, Ihre Rechnung an Billie zu bezahlen. Die Zahlungsinformationen erhalten Sie per E-Mail von Billie.

Payment Descriptor (EN)

Additional Payment Information (EN)

Pay by invoice

Buy now, pay later. When paying by invoice, Billie GmbH takes over payment processing in collaboration with Klarna Bank (publ). After receiving the payment information, you have XX days to pay your Billie invoice. You will receive the payment information via email from Billie.


Step 2: Integrate the Billie Badge

151151

Refer to the following links to implement the Billie Badge:

SVG

https://storage.googleapis.com/billie-static-files/Billie_Badge.svg

PNG

https://storage.googleapis.com/billie-static-files/Billie_Badge.png

Our preferred integration features our Billie blue badge as seen above. It should always be displayed alongside the Payment Descriptor and should never overlap with other content, such as text or other elements.

24002400

The standard size for implementation is 60px height x 30px width at a 1:1 pixel density (or @1x). The minimum size is 48px height x 24px width at a 1:1 pixel density.

16001600

If your checkout has a dark background and does not offer visibility against our standard badge, a white badge is also available.

151151

Refer to the following links to implement the white Billie Badge:

SVG

https://storage.googleapis.com/billie-static-files/Billie_Badge_White.svg

PNG

https://storage.googleapis.com/billie-static-files/Billie_Badge_White.png
24002400

If you need support on integration best practices, please feel free to contact us.


Step 3: Check your results!

Please ensure that all the elements have been implemented properly. You can use our Do's and Don'ts overview below to make sure that you have taken all the right steps.

Do's

16001600

Don'ts

16001600

Did this page help you?