Schaltfläche „Jetzt bezahlen“ für Stripe Connector for NetSuite
Bei Verwendung der Stripe Connector for NetSuite-Funktion Rechnungszahlungsseite oder Rechnungszahlungslink (kostenlos und Self-Service) gibt es mehrere Möglichkeiten, den Link zur Zahlungsseite vom internen Rechnungsdatensatz der kundenorientierten Rechnungs-PDF zuzuordnen, damit Ihre Kundinnen und Kunden eine Zahlung tätigen können. Hier finden Sie einen vorgefertigten Codeausschnitt für die Schaltfläche „Jetzt bezahlen“, der in den Quellcode für erweitertes PDF eingefügt werden kann. Anweisungen und Anpassungsmöglichkeiten finden Sie weiter unten.
Vorschau der Vorlage für erweitertes PDF mit Codeausschnitt:
Codeausschnitt, der die Schaltfläche „Jetzt bezahlen“ erstellt:
<#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>
Der violette Bereich unten ist die empfohlene Stelle für den Codeausschnitt der „Jetzt bezahlen“-Schaltfläche in der Vorlage für erweitertes PDF:
Vorgehensweise zur Installation unseres Codeausschnitts:
- Überprüfen oder konfigurieren Sie, welche PDF-Vorlage von dem Rechnungsformular verwendet wird, auf dem Sie das Feld „Zahlungsseitenlink“ installiert haben.
- Navigieren Sie zu „Anpassungen“ > „Formulare“ > „Transaktionsformulare“. Suchen und bearbeiten Sie das Rechnungsformular aus dieser Liste und stellen Sie sicher, dass es für die Verwendung einer Vorlage für erweitertes PDF konfiguriert ist. Kopieren Sie den Namen dieser Vorlage oder merken Sie ihn sich.
- Navigieren Sie zu „Anpassungen“ > „Formulare“ > „Erweitertes PDF/HTML-Formulare“. Klicken Sie auf die Umschaltfläche oben rechts, um den Quellcode anzuzeigen.
- Sofern Sie nicht mit der Standardvorlage für erweitertes PDF für Rechnungen beginnen, wurde Ihre Vorlage wahrscheinlich bereits angepasst. Der Quellcode für erweitertes PDF ist in HTML geschrieben und enthält CSS- und FreeMarker-Elemente. Der obige Codeausschnitt ist im Wesentlichen eine „Tabelle“ mit zwei „<#assign...“-Parametern davor. Der gesamte Ausschnitt kann in der Regel kopiert und in der Vorlage an einer beliebigen Stelle eingefügt werden, an der eine einzelne Tabelle platziert werden könnte.
- Empfohlen: Klicken Sie auf die Schaltfläche „Vorschau“ in der oberen rechten Ecke der Quelltextseite. Daraufhin sollte eine neue Registerkarte mit der visuellen Vorlage des Formulars geöffnet werden. Lassen Sie diese Seite in einer separaten Registerkarte geöffnet, damit Sie nachsehen können, wo Sie sich im Code befinden. Im Allgemeinen lässt sich die Tabelle am einfachsten zwischen den Elementen <body> und </body> einfügen, die bereits im Quellcode enthalten sind. Sie kann aber auch in die Kopf- oder Fußzeile eingefügt werden.
- Sie müssen den Anfang und das Ende verschiedener Codeblöcke finden und den Codeausschnitt an dieser Stelle einfügen, anstatt einen Codeblock zu unterbrechen.
- Beispielsweise sehen Sie die Hierarchie der HTML-Elemente, die zum Erstellen von Tabellen verwendet werden und in der Regel mit <table> beginnen und mit </table>enden. Sie können den Codeausschnitt zwischen vorhandenen Tabellen einfügen.
Anpassungsmöglichkeiten:
Der Codeausschnitt funktioniert unverändert, indem Sie ihn einfach kopieren und an einer geeigneten Stelle im Quellcode einfügen. Sie können die Darstellung und Position jedoch mit den folgenden Optionen weiter anpassen:
- align="left" : Ändern Sie beide unten angezeigten Instanzen davon in „zentriert“ oder „rechts“, um die Schaltfläche „Jetzt bezahlen“ und das Logo „Powered by Stripe“ an dieser Position auf der Seite auszurichten.
- background-color: #635BFF: Ändern Sie diese Farbkennung, um die Hintergrundfarbe der Schaltfläche zu ändern.
- color: white: Ändern Sie den „weißen“ Text in einen anderen HTML-Farbnamen, um die Farbe des Textes in der Schaltfläche zu ändern.
- font-weight: bold: Ändern Sie den „fettgedruckten“ Text in eine andere HTML-Option für die Schriftart innerhalb der Schaltfläche.
- ">Pay Now</a>: Ändern Sie den Text „Jetzt bezahlen“ in einen Text Ihrer Wahl.
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" />: Das Logo „Powered by Stripe“ kann in lila oder weiß geändert werden, indem Sie die entsprechende URL in den grün hervorgehobenen Bereich zwischen den Anführungszeichen „...“ einfügen.
- Dieser Code enthält Optionen, mit denen Sie die Größe und die Ränder sowohl der Schaltfläche als auch des Logos „Powered by Stripe“ ändern können.
Weitere Optionen für die Erstellung Ihrer eigenen Feldzuordnung zur PDF-Vorlage:
Mit der Standard-PDF-Vorlage können Sie {custbody_stripe_payment_link} in einem Textfeld verwenden. Diese Option ist jedoch sehr eingeschränkt, was die Möglichkeit betrifft, das Erscheinungsbild des Links anzupassen.
Mit dem Quellcode der Vorlage für erweitertes PDF können Sie Ihren eigenen Code für eine nutzerdefinierte Schaltfläche erstellen. Wir empfehlen jedoch, den vorgefertigten Code als Ausgangspunkt zu verwenden. Für diesen Link zur Zahlungsseite gelten neue technische Anforderungen, nach denen der Transaktionsfeldtyp „Hyperlink“ verwendet werden muss. Dies verhindert, dass Sie die Einstellung „Linktext“ auf der Seite „Transaktionsfeld“ verwenden können. Dazu müssen Sie in Ihrem Code Elemente wie „<#assign …“ und „<a href …“ verwenden, wie wir es im obigen Codeausschnitt getan haben.