# Stripe Connector for NetSuite Pay Now button

When using the Stripe Connector for NetSuite [invoice payment page](https://docs.stripe.com/connectors/netsuite/invoice-payment-page) or [invoice payment link](https://docs.stripe.com/connectors/netsuite/invoice-payment-link/overview) (free or 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 Pay Now button using the code snippet included:
Preview of Advanced PDF template with Pay Now button
Code snippet that creates the “Pay Now” button:
```html
<#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;">
            <div style="margin-left: 0px; padding: 0px 20px; display: inline-block; background-color: #635BFF; color: white; font-weight: bold; border-radius: 5px !important; font-size: 18px;">
                 <a href="${paymentLink}" style="text-decoration: none;" >Pay Now</a>
            </div>
        </td>
    </tr>
</table>
```
The purple section below is the recommended location of the “Pay Now” button code snippet in the Advanced PDF template:
Advanced PDF template with section highlighted showing location of Pay Now button
## How to install our code snippet
1. Verify or configure which PDF template is being used by the invoice form that you installed the Payment Page Link field on.
1. 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.
1. Navigate to Customizations>Forms>Advanced PDF/HTML Forms. Check the toggle in the top right to reveal the source code.
1. Unless you're 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.
1. 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.
1. 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.
* `<a>Pay Now</a>`: Change the Pay Now text to your own text choice.
* There are also options to change the sizing and margins of the button.
### 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 has very limited ways 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.
### Add a QR code for the payment link on advanced PDF templates
The snippet below has code for adding a QR code to the payment link:
```
<#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="right">
            <table style="width: auto;">
                <tr>
                    <td align="center" style="padding-right: 20px;">
                        <div style="margin-top: 10px;">
                            <div style="padding: 8px 16px; display: inline-block; background-color: #635BFF; color: white; font-weight: bold; border-radius: 5px !important; font-size: 14px;">
                                <a href="${paymentLink}" style="text-decoration: none; color: white;">Pay Now</a>
                            </div>
                        </div>
                        <barcode codetype="qrcode" 
                                 showtext="false" 
                                 height="100" 
                                 width="100" 
                                 value="${paymentLink}"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
```
With this snippet, the QR code displays below the Pay Now button:
PDF template with QR code