Add a dynamic QR code

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

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 :

IMAGE("https://image-charts.com/chart?chs=200x200&cht=qr&chl="&URL__c,"link QR code" , 200, 200)

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:

 https://image-charts.com/chart?chs=150x150&cht=qr&chl={!URLENCODE(sofactoapp__Factures_Client__c.sofactoapp__clientPaymentPspURL__c)}" width="150px" />

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

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.

Case study: Displaying the Stripe payment link

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

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

https://image-charts.com/chart?chs=150x150&cht=qr&chl={!URLENCODE(sofactoapp__Factures_Client__c.sofactoapp__clientPaymentPspURL__c)}" width="150px" />

in the Payment schedule linesinside the apex:repeat:

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