Ajouter un QR code dynamique pour paiement

QR Code en URL

Il est possible d'avoir un JPEG de QR code avec une simple URL. Par exemple :
https://image-charts.com/chart?chs=200x200&cht=qr&chl=https://www.youtube.com/watch?v=dQw4w9WgXcQ
qui se découpe de la manière suivante :

URL racine & taille du QR code & type de code & URL à encoder

Créez un champ qui accueil l'URL cible

Afin de pouvoir ajouter un QR code sur votre page Visualforce, il faut stocker l'URL cible dans un champ personnalisé de type Texte. Pour ce faire :

Procédure

1. Allez dans Configuration > Gestionnaire d'objet > Facture.
2. Cliquez sur Champs et relations.
3. Cliquez sur le bouton Nouveau.
4. Choisissez le type de donnée : Texte.

Remarque : Créez un champ texte de 255 caractères max

Très bien ! Utilisons maintenant un champ formule pour composer la structure vue au début :
URL racine & taille du QR code & type de code & URL à encoder.

Créez un champ formule qui concatène

Ensuite nous continuons par créer un deuxième champ formule qui nous permet d'ajouter notre champ texte dans la structure google.

Procédure

1. Allez dans Configuration > Gestionnaire d'objet > Facture.
2. Cliquez sur Champs et relations.
3. Cliquez sur le bouton Nouveau.
4. Choisissez le Type de donnée : Formule.
5. Ensuite sélectionnez Texte comme Type de renvoi de la formule.

On utilisera la balise image :

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

Ajoutez le champ image dans la page Visualforce

Maintenant que le champ formule est prêt, nous pouvons ajouter le QR code sur votre page Visualforce.

Procédure

1. Allez dans Configuration.
2. Tapez Visualforce dans la barre de recherche.
3. Ouvrez votre page Visualforce.

Astuce : Si vous connaissez plus le nom de votre page Visualforce vous pouvez ouvrir le modèle en cliquant sur le nom du modèle qui est affiché dans le champ Modèle de facture par défaut de votre Raison sociale. Ensuite vous pouvez chercher le nom du modèle dans les pages Visualforce de la configuration Salesforce.

4. Ajoutez ce code dans l'emplacement que vous souhaitez :

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

Ajoutez image-charts.com en site distant sûr

Pour assurer que la page Visualforce affiche les images qui viennent d'une autre source, il faut l'ajouter comme site distant sûr.

Procédure

1. Allez dans la configuration.
2. Tapez site dans la barre de recherche.
3. Dans la section Sécurité cliquez sur Paramètres de site distant.
4. Cliquez sur Nouveau site distant.
5. Insérez les informations : Nom étiquette et url : https://image-charts.com

Testez votre chef-d'oeuvre

Voilà une bonne chose de faite ! Vérifiez le résultat en quelques pas :

Procédure

1. Allez dans l'onglet Factures.
2. Ouvrez une facture.
3. Prévisualisez le PDF en cliquant sur Créer PDF.

Cas pratique : Affichage du lien de paiement Stripe

Afin de mettre en place le nouveau mode de paiement Stripe, vous pouvez suivre ces articles :

Pour afficher les liens de paiement Stripe sur votre PDF de facture, vous devez seulement faire quelques modification dans les procédures expliqués plus haut :

1. Au lieu d'un champ personnalisé URL, vous utilisez le champ Url de Paiement client (Nom API : sofactoapp__clientPaymentPspURL__c) sur l'objet Règlement.
2. Au lieu de créer le champ formule Image sur l'objet Facture, vous allez le créer sur l'objet Règlement.
3. Vous allez mettre la taille 100x100 pixel pour avoir un affichage plus convenable.

Dans la page Visualforce, vous allez insérer le code

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

dans la partie Lignes d'échéancier de règlement, à l'intérieur de l'apex:repeat :

La procédure est terminée, vous pouvez à présent réaliser des tests de création de PDF.