Introduction

The goal of using QR codes and payments links is to collect a payment. Generating these links and configuring the payment behind them is, generally, straightforward. We provide lots of configuration options so that you can fine tune the QR codes and payment links behavior. We cover each option in detail in their respective sections. Let's get started.

Generate a QR code

API Reference: Generate a QR code

You can immediately start manually generating an EPC QR code through our online wizard.

Let's take a look at the QR code and the URL tied to it:

https://app.digiteal.eu/api/v1/image-request/slip-image-anonymous?iban=BE72000000001616&billerName=Red%20Cross%20of%20Belgium&amount=1&remittanceInfo=Urgency%20fund&format=qr&language=en

You can re-use such an url to automatically generate other QR codes by changing the values of the query parameters (more on these below). This approach is convenient and anonymous, but doesn't come without its drawbacks. The QR code that is generated is in EPC format and is, as of yet, only supported by mobile banking apps that have explicitly enabled the use of this format. Generally you would want a QR code that is supported by every bank in the EU.

🚧

The QR code generated in the section above is in EPC-format, to guarantee universal support use our registered QR-code generator (account required) and benefit from our webhook-based notification system

To create a universal QR-code, account registration is required. Once set up (and you have defined your bank account(s) in the dashboard), you can generate the same QR code as before (it will still be in EPC format), but now Digiteal will act as an intermediary to ensure the payment is supported by all EU banks.

List of generated formats

Name	Slug	Example
QR BE	QR_BE
QR NL	QR_NL
QR URL	QR_URL
QR TEXT	BCD 001 1 SCT BPOTBEB1 Red Cross BE72000000001616 EUR1 CHAR Urgency Fund Sample EPC QR Code
Banner 6	BANNER6

Generate a payment button

There is no easier way to integrate payments than through a payment button. A user can start a transaction by simply clicking a button. Implementing this solution only requires some basic HTML in your email or web platform. The generated button intelligently updates its appearance once a payment is complete, showing users when transactions are fulfilled. Of course you can still be notified whenever payments are validated through the use of webhooks.

API Reference: Payment button generation API

HTML example for a website

<a href="https://app.digiteal.eu/api/v1/payment-request/pay-button/execute?requesterVAT=BE0406729809&amountInCents=4000&iban=BE72000000001616&language=en&remittanceInfo=Urgency%20Fund" style="outline: none;">
  <img src="https://app.digiteal.eu/api/v1/payment-request/pay-button?requesterVAT=BE0406729809&amountInCents=4000&iban=BE72000000001616&language=en&remittanceInfo=Urgency%20Fund">
</a>

Which would yield the following button:

If the status is paid:

HTML example for an email

<style>
  .payButtonLink {
    outline: none;
    line-height: 42px;
  }
  .payButtonImage {
    font-size: 17px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    background-color: #0cb4bf;
    color: #ffffff;
    height: 38px;
    min-width: 120px;
    text-align: center;
    border-radius: 5px
  }
</style>
<a class="payButtonLink" target="_blank" href="...">
  <img class="payButtonImage" alt="PAY" src="..."/>
</a>

Which would yield the following button:

Many email clients disable images by default, so it’s important to provide fallback styling to ensure proper rendering. The solution involves using two specific CSS classes on the payment link and image:

• payButtonLink: This class vertically aligns the alternative text.
• payButtonImage: This class applies a background color, rounded borders, and font styling to make the fallback text resemble the intended button image from Digiteal.

Remember to include an appropriate, localized alt text (e.g., PAY, BETAAL, PAYER, etc.) on the image. Although this fallback styling is mainly needed for emails, you can apply it universally.

One drawback is that, without the image, customers might not immediately see the payment status. They could be unaware if the payment has already been processed. However, by clicking the payment link, they can view the updated status.