Stripe Connector for NetSuite Pay Now button
When using the Stripe Connector for NetSuite feature invoice payment page, or invoice payment link (free & self-serve) there are multiple ways to map the payment page link from the internal-facing invoice record to the customer-facing invoice PDF to enable your customers to make a payment. Here's a pre-built “Pay Now" button code snippet that can be inserted into the Advanced PDF source code. See below for instructions and customization options.
Preview of the Advanced PDF template with code snippet included:
Code snippet that creates the “Pay Now” button:
<#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>
The purple section below is the recommended location of the “Pay Now” button code snippet in the Advanced PDF template:
How to install our code snippet:
- Verify or configure which PDF template is being used by the invoice form that you installed the Payment Page Link field on.
- Navigate to Customizations>Forms>Transaction forms. Find and Edit the invoice form from that list, and make sure that it is configured to use an Advanced PDF template. Copy or remember the name of that template.
- Navigate to Customizations>Forms>Advanced PDF/HTML Forms. Check the toggle in the top right to reveal the source code.
- Unless you are starting with the default Advanced PDF template for invoices, your template will likely already have been customized. The Advanced PDF source code is written in HTML with CSS and FreeMarker elements included. The code snippet above is essentially a “table” with two “<#assign..” parameters before it. The entire snippet can generally be copied and pasted anywhere on the template where an individual table could be placed.
- Recommended: click the “Preview” button in the top right corner of the source code page. This should open a new tab with the visual template of the form. Keep this open in a separate tab so you can reference where you are in the code. Generally, the table is easiest to paste between the <body> and </body> elements already in the source code, but it can also be pasted within the header or footer.
- You need to find the beginning and end of different blocks of code and paste the code snippet in that space, instead of interrupting a block of code.
- For example, you will see the hierarchy of HTML elements used to create tables, which generally begin with <table> and end with </table>. You can paste the code snippet between existing tables.
Customization options:
The code snippet will function as-is by simply copy and pasting it into an appropriate location in the source code. However, you can further customize the look and position with the following options:
- align="left" -Change both instances of this that appear below to “center” or “right” to align the “Pay Now” button and the “Powered by Stripe” logo to that position on the page.
- background-color: #635BFF -Change this color identifier to change the background color of the button.
- color: white -Change the “white” text to another HTML color name to change the color of the text in the button.
- font-weight: bold -Change the “bold” text to another HTML option for the font within the button.
- ">Pay Now</a> -Change the “Pay Now” text to your own text choice.
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" /> -The “Powered by Stripe” logo can be changed to purple or white color by pasting the corresponding url into the green highlighted section between the “...” quotation marks.
- There are options included within this code to change the sizing and margins of both the button and the “Powered by Stripe” logo.
Other options for creating your own field mapping to the pdf template:
Using the Standard PDF template, you can include {custbody_stripe_payment_link} in a text box. However, this option is very limited in terms of being able to customize the appearance of the link.
Using the Advanced PDF template source code, you can write your own code for a customized button, but we recommend using the pre-built code as a starting point. There are new technical requirements for this Payment Page link that require it to use a “Hyperlink” transaction body field type, which prevents you from being able to utilize the “Link Text” setting on the transaction body field page. This requires you to use elements in your code like “<#assign…” and “<a href…” as we have done in the above code snippet.