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 à partir de l'enregistrement de facture à l'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 de 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 qui permet de créer le bouton de 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 de 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 peut être placé.
    1. Recommandé : Cliquez sur le bouton « Aperçu » dans le coin supérieur droit de la page du code source. Cette action doit ouvrir un nouvel onglet contenant le modèle visuel du formulaire. Gardez-le ouvert dans un onglet distinct 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 ou le pied de page.
    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 et le 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 mappage propre au modèle PDF :

Grâce au 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.

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