---
title: "Add a dynamic QR code"
slug: "modèles-pdf-ajouter-un-qr-code-dynamique"
updated: 2025-11-06T08:45:14Z
published: 2026-01-07T10:04:05Z
canonical: "help.frisbii.com/modèles-pdf-ajouter-un-qr-code-dynamique"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a dynamic QR code

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(530).png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A53%3A30Z&se=2026-10-28T01%3A53%3A30Z&sr=c&sp=r&sig=ocSpNiWrFdAhstP8Bd9Fx25k1RNQudC%2FUjwl1pFPnfU%3D)

## URL QR Code

It's possible to have a QR code in JPEG format with a simple URL. For example:<0>https://image-charts.com/chart?chs=200x200&cht=qr&chl=[https://www.youtube.com/watch?v=dQw4w9WgXcQ](https://www.youtube.com/watch?v=dQw4w9WgXcQ) which is divided as follows:

**Root URL** & QR code size & code type & URL to encode

## Create a field to host the target URL

In order to be able to add a QR code to your Visualforce page, you need to store the target URL in a custom text field. To do this :

### Steps

1. Go to Setup > Object Manager > **Invoice**. 2. Click on **Fields and relationships**. 3. Then click on the **New** button.4. Select data type: **Text**.

**Note** : Create a text field of up to 255 characters

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image-SKMR6U2N.png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A53%3A30Z&se=2026-10-28T01%3A53%3A30Z&sr=c&sp=r&sig=ocSpNiWrFdAhstP8Bd9Fx25k1RNQudC%2FUjwl1pFPnfU%3D)

All right! Let's now use a formula field to compose the structure seen at the beginning: **Root URL** & QR code size & Code type & URL to encode.

## Create a formula field that concatenates

Next, we create a second formula field that allows us to add our text field to the google structure.

### Steps

1. Go to Setup > Object Manager > **Invoice**. 2. Click on **Fields and relationships**. 3. Then click on the **New** button.4. Select *Data type*: **Formula**. 5. Then select **Text** as the *Form Return Type*.

We will use the image tag :

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="a"><table><tbody><tr><td><pre>IMAGE("<a href="https://image-charts.com/chart?chs=200x200&amp;cht=qr&amp;chl=" &url__c"="" rel="noopener">https://image-charts.com/chart?chs=200x200&amp;cht=qr&amp;chl="&amp;URL__c</a>,"link QR code" , 200, 200)</pre></td></tr></tbody></table></editor360-custom-block>

## Add the image field to the Visualforce page

Now that the formula field is ready, we can add the QR code to your Visualforce page.

### Steps

1. Go to Setup. 2. Type *Visualforce* in the quick search bar. 3. Open your Visualforce page. **Tip:** If you don't know the name of your Visualforce page, you can open the template by clicking on the template name displayed in the Default invoice template field of your Corporate name. You can then search for the template name in the Visualforce pages of the Salesforce configuration. 4. Add this code in the location of your choice:

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="a"><pre> <apex:image value="&lt;a href=" https:="" image-charts.com="" chart?chs="150x150&amp;cht=qr&amp;chl={!URLENCODE(sofactoapp__Factures_Client__c.sofactoapp__clientPaymentPspURL__c)}">https://image-charts.com/chart?chs=150x150&amp;cht=qr&amp;chl={!URLENCODE(sofactoapp__Factures_Client__c.sofactoapp__clientPaymentPspURL__c)}" width="150px" /&gt; </apex:image></pre></editor360-custom-block>

## Add image-charts.com as a secure remote site

To ensure that the Visualforce page displays images from another source, it must be added as a secure remote site.

### Steps

1. Go to Setup. 2. Type *site* in the quick search bar. 3. In the *Security* section, click on **Remote site settings**. 4. Click on **New Remote Site**. 5. Insert the following information: Label name and url: https: [//image-charts.com](https://image-charts.com)

## Test your masterpiece

A good thing done! Check the result in just a few steps:

### Steps

1. Go to the **Invoices** tab. 2. Open an invoice. 3. Preview the PDF by clicking on **Create PDF**.

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image-MR7AUZE9.png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A53%3A30Z&se=2026-10-28T01%3A53%3A30Z&sr=c&sp=r&sig=ocSpNiWrFdAhstP8Bd9Fx25k1RNQudC%2FUjwl1pFPnfU%3D)

## Case study: Displaying the Stripe payment link

In order to set up the new Stripe payment method, you can follow these articles:

- [Definition & use cases](/frisbii-app/docs/en/mode-de-paiement-stripe-guide-dinstallation)
- [Installation guide](/frisbii-app/docs/en/mode-de-paiement-stripe-guide-dutilisation)
- [PDF invoice templates](/frisbii-app/docs/en/frisbii-pay-modèles-pdf-de-facture)

To display Stripe payment links on your PDF invoice, you only need to make a few changes to the procedures explained above:

1. Instead of a custom URL field, you use the **Customer Payment Url** field (API name: sofactoapp__clientPaymentPspURL__c) on the Payment object. 2. Instead of creating the Image formula field on the Invoice object, you'll create it on the **Payment** object. 3. You're going to set the **size to 100x100 pixels** for a more suitable display.

In the Visualforce page, you will insert the code

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="a"><pre><apex:image value="&lt;a href=" https:="" image-charts.com="" chart?chs="150x150&amp;cht=qr&amp;chl={!URLENCODE(sofactoapp__Factures_Client__c.sofactoapp__clientPaymentPspURL__c)}">https://image-charts.com/chart?chs=150x150&amp;cht=qr&amp;chl={!URLENCODE(sofactoapp__Factures_Client__c.sofactoapp__clientPaymentPspURL__c)}" width="150px" /&gt; </apex:image></pre></editor360-custom-block>

in the **Payment schedule linesinside the apex:repeat**:

Now that the procedure is complete, you can test PDF creation.