QR Codes & Payment Buttons

1. Why Choose Digiteal QR Codes Over Standard EPC QR Codes?

While standard European Payments Council (EPC) QR codes are a recognized format, they come with significant limitations. Here is why Digiteal's dynamic QR codes are the better choice for your integration:

• Universal Bank Support: EPC QR codes don't work with every banking app. Digiteal QR codes are universally supported across all EU banks, ensuring a frictionless experience for all customers.
• Automated Webhook Notifications: Because a standard EPC QR code does not create a dedicated payment session in our system, you cannot receive automated webhooks when a payment is completed. This forces you to track payments manually via your bank statements. Digiteal QR codes are fully integrated into our platform and trigger instant webhook notifications, enabling you to automate order fulfillment effortlessly.
• Dynamic Payment Status: EPC QR codes are completely static. Digiteal's QR codes are dynamic—if a payment has already been processed, the checkout page will intelligently update its appearance to reflect the fulfilled status, preventing users from accidentally paying twice.

2. QR Codes & Visual Formats

Depending on your architecture, you have two ways to present a QR code to your users:

Method A: Use our payments links API and generate your own QR code

📘

For a full explanation on payment links, check our guide here

If you already have a preferred QR code generation library in your frontend or backend, you do not have to use our image generation endpoints.

You can simply generate a standard payment link using our Payment Links API (using the POST /api/v1/payment-request endpoint). Once you receive the payment-web-url in the response, just pass that string into your own QR generator to create the image yourself.

Method B: Digiteal's QR code API

Endpoint: GET api/v1/image-request/slip-image-anonymous

Key Query Parameters

You append these directly to the endpoint URL:

And then finally use the format query parameter to select the appropriate visual representation:

Example Request:

https://test.digiteal.eu/api/v1/image-request/slip-image-anonymous?billerName=AcmeInc&billerVAT=BE0863311183&iban=BE76173688393895&amount=2&format=QR_URL&size=400&directPayment=false&multiple=false

3. Generate a Payment Button

There is no easier way to integrate payments into emails, invoices, or simple web pages than through a payment button. A user can start a transaction by simply clicking it. Implementing this solution only requires basic HTML.

Endpoints:

• Image Source: GET /api/v1/payment-request/pay-button
• Click Action: GET /api/v1/payment-request/pay-button/execute

Key Query Parameters

You append these directly to the endpoint URL:

How the Dynamic Status Works

The real magic of the Digiteal payment button lies in the <img> tag. The src URL of the image points directly to our API. When the user opens their email or loads your web page, our server checks the real-time status of that specific transaction.

• Pending: We serve an image that says "PAY".
• Fulfilled: We serve an image that says "PAID" (or the localized equivalent).

This intelligently updates its appearance, preventing users from accidentally paying twice.

HTML Example for a Website

To embed a button on a website, use the execute endpoint for the link (href), and the standard pay-button endpoint for the image (src).

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

HTML Example for an Email

Emails require slightly more care. Many email clients (like Outlook or Gmail) disable external images by default for security reasons. It is critical to provide fallback CSS styling to ensure the button still looks clickable even if the image hasn't loaded.

<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="https://app.digiteal.eu/api/v1/payment-request/pay-button/execute?...">
  <img class="payButtonImage" alt="PAY" src="https://app.digiteal.eu/api/v1/payment-request/pay-button?..."/>
</a>

💡

How the fallback works

• .payButtonLink: Vertically aligns the alternative text.

• .payButtonImage: Applies a background color, rounded borders, and font styling so the raw alt text visually resembles a button.

Always include an appropriate, localized alt text (e.g., PAY, BETAAL, PAYER). One minor drawback of images being blocked by the email client is that the dynamic "PAID" status image cannot load until the user "allows images." However, clicking the link will always take them to the live payment page where the current status is explicitly shown.