Bouton de paiement immédiat Stripe Connector for NetSuite

Lors de l’utilisation de la fonctionnalité Stripe Connector for NetSuite pour une page de paiement de facture ou un lien de paiement de facture (gratuit et en libre-service), il existe plusieurs moyens de mapper le lien de la page de paiement depuis l’enregistrement de facture en interne vers la facture client au format PDF afin de permettre aux clients d’effectuer un paiement. Voici un extrait de code prédéfini pour le bouton « Paiement immédiat » qui peut être inséré dans le code source du PDF avancé. Vous trouverez ci-dessous les instructions et les options de personnalisation.

Aperçu du modèle PDF avancé contenant l'extrait de code :

image13.png

Extrait de code permettant de créer le bouton « Paiement immédiat » :

<#assign rawLink = record.custbody_stripe_payment_link>

<#assign paymentLink = rawLink?replace('.*href="([^"]+)".*', '$1', 'r')>

<table class="payhere" style="width: 100%; margin-top: 10px; margin-bottom: 20px;">

   <tr>

       <td align="left" style="text-align: center; padding-bottom: 20px;">

           <a href="${paymentLink}" style="display: inline-block; padding: 15px 30px; background-color: #635BFF; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; font-size: 18px;">Pay Now</a>

       </td>

   </tr>

 <tr>

       <td align="left" style="text-align: center;">

          <img src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" />

           </td>

   </tr>

</table>

La section en surbrillance mauve de l’image ci-dessous présente l’emplacement recommandé de l’extrait de code du bouton « Paiement immédiat » dans le modèle PDF avancé :

image6.png

Comment installer notre extrait de code :

  1. Vérifiez ou configurez le modèle PDF utilisé par le formulaire de facture sur lequel vous avez installé le champ Lien vers la page de paiement.
    1. Accédez à Personnalisation > Formulaires > Formulaires de transactions. Recherchez et modifiez le formulaire de facture dans cette liste et assurez-vous qu'il est configuré pour l’utilisation d’un modèle PDF avancé. Copiez ou mémorisez le nom de ce modèle.
    2. Accédez à Personnalisation > Formulaires > Formulaires PDF/HTML avancés. Activez le bouton bascule dans le coin supérieur droit pour afficher le code source.
  2. À moins que vous ne commenciez avec le modèle PDF avancé par défaut pour les factures, votre modèle aura probablement déjà été personnalisé. Le code source du PDF avancé est écrit en HTML avec des éléments CSS et FreeMarker. L’extrait de code ci-dessus est essentiellement un « tableau » précédé de deux paramètres « <#assign.. ». L’extrait de code complet peut généralement être copié et collé à n'importe quel endroit du modèle où un tableau individuel pourrait être placé.
    1. Recommandé : cliquez sur le bouton « Aperçu » dans le coin supérieur droit de la page du code source. Un nouvel onglet contenant le modèle visuel du formulaire doit s’ouvrir. Gardez-le ouvert séparément afin de pouvoir vous repérer dans le code. En général, il est plus facile de coller le tableau entre les éléments <body> et </body> déjà intégrés au code source, mais il peut également être collé dans l'en-tête (header) ou du pied de page (footer).
    2. Vous devez trouver le début et la fin des différents blocs de code et coller l'extrait de code à cet endroit, au lieu d'interrompre un bloc de code.
      1. Par exemple, vous pouvez voir la hiérarchie des éléments HTML utilisés pour la création de tableaux, qui commencent généralement par <table> et se terminent par </table>. Vous pouvez coller l'extrait de code entre les éléments « table » existants.

Options de personnalisation :

L'extrait de code fonctionnera tel quel si vous le copiez-collez à l'endroit approprié dans le code source. Cependant, vous pouvez personnaliser davantage l'aspect et la position du bouton grâce aux options suivantes :

Autres options pour créer votre propre champ de mapping propre au modèle PDF :

En utilisant le modèle PDF standard, vous pouvez inclure {custbody_stripe_payment_link} dans une zone de texte. Toutefois, avec cette option, la personnalisation de l'apparence du lien est très limitée.

En utilisant le code source du modèle PDF avancé, vous pouvez écrire votre propre code pour créer un bouton personnalisé. Nous recommandons cependant de partir du code prédéfini. De nouvelles exigences techniques pour ce lien de page de paiement imposent l'utilisation d'un champ de type “Hyperlink” dans le corps de la transaction, empêchant l’utilisation du paramètre “Link Text” sur la page de paramétrage du champ. Il vous faut donc utiliser certains éléments dans votre code, tels que « <#assign… » et « <a href… », comme cela a été fait dans l’extrait de code ci-dessus.