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 a 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)

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	QR
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

Execute a payment

Payment button execution API

Redirect urls

For a more seamless integration experience you can set appropriate redirection urls:

• errorURL url the user will be redirected to in case of an error, when clicking on "return to to merchant".
• cancelURL url the user will be redirected to in case the payment is cancelled, when clicking on "return to to merchant".
• confirmationURL url the user will be redirected to in case of a successful payment, when clicking on "return to to merchant".

Email opt-in flow

The email opt-in flow collects the debtor's email address so that you can transition to a digital invoicing flow. When set up, after a successful payment, a form will be prompted to ask for an email address. This information will be sent back to the integrator through our webhooks.

Initial configuration

The first step is to setup the CUSTOMER_OPTIN webhook. For more information, check the configure webhooks section here.

Set the parameter

To include the email opt-in in a payment, set the correct query parameteremailOptin=true in the payment execution url.

Payment methods

List of the supported methods:

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.

Create short links

API Reference: Shortlink API

Since the generation and execution links for buttons and qr codes have the query parameters exposed, it can be useful to hide these away from the user. You could imagine that a sneaky individual could change some parameters around to avoid certain obligations... So, if you want to avoid people to tamper with the urls you generate, we invite you to use our short link API.

Testing credentials

To ensure a smooth integration you can use specific testing data to mimic certain payment execution scenarios.

Bancontact testing data

Credit card testing data

Pay button demos