Partner 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.
This Checkout Design covers all steps and options which can be adjusted for a rather manual setup of Billie in the checkout. For any standard integration way, this instruction manual can be neglected.
Table of Contents
Checkout Design via Klarna and Adyen
Below you will find our Billie Badges, as well as the correct labels for Payment Descriptor, Additional Subheading, and Additional Payment Information.
![](https://files.readme.io/82afd07c44dac45138bc4aa225e86288d70e92cd87160a81bfc66af5a0701422-Checkout_Design_Guide_01.png)
Step 1: Add the correct labels
Let's start with selecting the correct labels, which you can copy from the options below. You can choose between the two variants:
- Payment Descriptor + Subheading + short Payment Information
- Payment Descriptor + NO Subheading + long Payment Information
The second variant should only be used if you have integrated Billie using your Klarna integration with paywall.
Variant 1 (default)
Payment Descriptor (DE) | Additional Subheading (DE) | Additional Payment Information (DE) |
---|---|---|
Kauf auf Rechnung für Firmenkunden | Jetzt kaufen, erst in [XX] Tagen bezahlen | - Ohne zusätzliche Kosten - Keine Registrierung erforderlich - Die führende B2B-Lösung in Europa |
Payment Descriptor (EN) | Additional Subheading (EN) | Additional Payment Information (EN) |
---|---|---|
Pay Later for businesses | Pay [XX] days after purchase | - Interest-free - No registration needed - Europe's go-to B2B payment solution |
Payment Descriptor (SE) | Additional Subheading (SE) | Additional Payment Information (SE) |
---|---|---|
Betala med faktura för företag | Beställ nu, betala om [XX] dagar | - Billie tar inte ut några avgifter - Ingen registrering krävs - Säkra B2B-betalningar med BankID |
Payment Descriptor (NL) | Additional Subheading (NL) | Additional Payment Information (NL) |
---|---|---|
Zakelijk op rekening betalen | Betaal in [XX] dagen | - Achteraf betalen zonder rente - Geen registratie nodig Europa's toonaangevende B2B-betaaloplossing |
Payment Descriptor (FR) | Additional Subheading (FR) | Additional Payment Information (FR) |
---|---|---|
Paiement sur facture pour les pros | Payer sous [XX] jours | - Sans frais ni création de compte - La solution B2B leader en Europe |
Payment Descriptor (NO) | Additional Subheading (NO) | Additional Payment Information (NO) |
---|---|---|
Fakturakjøp for bedriftskunder | Betal [XX] dager etter forsendelse | - Ingen ekstra gebyrer - Ingen registerin nødvendig - Europas ledende B2B løsning |
Payment Descriptor (FI) | Additional Subheading (FI) | Additional Payment Information (FI) |
---|---|---|
Ostolasku yritysasiakkaille | Maksa [XX] päivää lähetyksen jälkeen | - Billie ei veloita maksuja - Kirjautamista ei vaadita - Euroopan B2B-maksujen ensisijainen ratkaisu |
Variant 2 (Paywall option only for Billie via Klarna)
Payment Descriptor (DE) | Additional Payment Information (DE) |
---|---|
Kauf auf Rechnung für Firmenkunden | Jetzt kaufen, erst in [XX] Tagen bezahlen. Ohne zusätzliche Kosten. Keine Registrierung erforderlich. Die führende B2B-Lösung in Europa. |
Payment Descriptor (EN) | Additional Payment Information (EN) |
---|---|
Pay Later for businesses | Pay [XX] days after purchase. Interest-free. No registration needed. Europe's go-to B2B payment solution. |
Step 2: Integrate the Billie Checkout Badge
The standard size for implementation is 64px x 32px. The minimum size is 27px width.
![](https://files.readme.io/44dffcf6170a4ba493b081d8741ab53fd2c3755bc1f5a5b7edb23f90bad932f3-Checkout_Design_Guide_02.png)
Refer to the following links to implement the Billie Checkout Badge:
SVG
https://static.billie.io/badges/Billie_Checkout_Default.svg
PNG
https://static.billie.io/badges/Billie_Checkout_Default.png
Our preferred integration features our Billie black 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.
![](https://files.readme.io/b9be6ff4bbd94fee5ebe1bfc99a6553cc4ec306e4b8c7d9980e73c3924dd4c51-Checkout_Design_Guide_03.png)
If your checkout has a dark background and does not offer visibility against our standard badge, a white badge is also available.
![](https://files.readme.io/a95a637efbfda3b0eb80f0f47471e2aaa9ec162281ee08c54ec4e72a2bd153fa-Checkout_Design_Guide_04.png)
Refer to the following links to implement the white Billie Badge:
SVG
https://static.billie.io/badges/Billie_Checkout_White.svg
PNG
https://static.billie.io/badges/Billie_Checkout_White.png
![](https://files.readme.io/c3cb5ac1edf6c491f00f021e5e1c076b459915904608b942290d822ab8a928df-Checkout_Design_Guide_05.png)
Step 3: Check your results!
Please ensure that all the elements have been implemented properly. You can use our "Don'ts" overview below to make sure that you have taken all the right steps.
Don'ts
![](https://files.readme.io/e8c939f124813f2bf69b62fd58ecfb67625386f6869223fdf3ab248df44512cb-Checkout_Design_Guide_06.png)
If you need support on integration best practices, please feel free to contact us.
Checkout Design via Mollie
Below you will find our Billie Badge, as well as the correct labels for Payment Descriptor, Additional Subheading, and Additional Payment Information.
![](https://files.readme.io/60354cb3640851ca8f1ec8f604094cd2c9d45239e52d71f228f4f5b5611e804b-Checkout_Design_Guide_8.png)
Step 1: Add the correct labels
Let's start with selecting the correct labels, which you can copy from the table below:
Payment Descriptor (DE) | Additional Subheading (DE) | Additional Payment Information (DE) |
---|---|---|
Kauf auf Rechnung für Firmenkunden – Billie | Jetzt kaufen, erst in [XX] Tagen bezahlen. | - Ohne zusätzliche Kosten - Keine Registrierung erforderlich - Die führende B2B-Lösung in Europa |
Payment Descriptor (EN) | Additional Subheading (EN) | Additional Payment Information (EN) |
---|---|---|
Pay Later for businesses – Billie | Pay [XX] days after shipment | - Interest-free - No registration needed - Europe's go-to B2B payment solution |
Payment Descriptor (SE) | Additional Subheading (SE) | Additional Payment Information (SE) |
---|---|---|
Betala med faktura för företag – Billie | Betala om [XX] dagar | - Billie tar inte ut några avgifter - Ingen registrering krävs - Säkra B2B-betalningar med BankID |
Payment Descriptor (NL) | Additional Subheading (NL) | Additional Payment Information (NL) |
---|---|---|
Zakelijk op rekening betalen – Billie | Betaal in [XX] dagen | - Achteraf betalen zonder rente - Geen registratie nodig - Europa's toonaangevende B2B-betaaloplossing |
Payment Descriptor (FR) | Additional Subheading (FR) | Additional Payment Information (FR) |
---|---|---|
Paiement sur facture pour les pros – Billie | Payer sous [XX] jours | - Sans frais ni création de compte - La solution B2B leader en Europe |
Make sure to include:
- Available for business customers
- 30 days (or your negotiated) payment terms
- "Billie" in the description
Step 2: Integrate the Billie Checkout Badge
Please make sure that the Billie badge is displayed correctly in your checkout. If needed, you can download the Billie Badge for Mollie integrations via the following links:
Step 3: Check your results!
Please ensure that all the elements have been implemented properly. You can use our "Don'ts" overview below to make sure that you have taken all the right steps.
Don'ts
![](https://files.readme.io/9da905936f02238bb3ac3be0e69cbd19a9dc07e562e8f3a72fa2eb3938fef247-Checkout_Design_Guide_9.png)
If you need support on integration best practices, please feel free to contact us.
Updated 2 days ago