PayJunction's No-code Payments Integration is a Chrome based extension that opens in the browser, along-side your software application. Users are able to process payments without leaving your software.

When the extension is opened, it is able to read data from the webpage. By reading specific data on the webpage, the extension is able to auto-populate payment details such as: amount, customer name, invoice, making the payment process easy and seamless.

Table of Contents

1. Create a New Integration
   1. Go to the Settings section
   2. Name your integration and enter the URL
   3. Configure the extension to automatically pre-populate data
2. Low Code Integration Example
   1. Include customer data on the payment page
   2. Map data fields

Click here for instructions to download and install the extension.
Download and install PayJunction's No-code Payments Integration extension to follow along with these instructions.

Create a New Integration

Step 1) Go to the Settings section

1. Open PayJunction's No-code Payments Integration. If needed, click here for instructions to download and install the extension.
2. Click on the gear icon to go to settings.
   
3. Select Add a Custom Integration
   

Step 2) Name your integration and enter the URL

1. Name: Enter the name for your integration (ex. YourSoftware Payments)
2. URL: Enter the URL for the page where payments are processed. 
3. Auto Open: When toggled On, the extension will automatically open when the user visits the URL identified above. 
4. Default Action: By default, all transactions will be processed as a Charge. If needed, the default action can be set to Refund.

Step 3) Configure the extension to automatically pre-populate data

The extension is able to automatically read data from any field or text on your webpage. This feature eliminates the need to manually type an amount, customer name, notes, etc. Instead, the extension will automatically read and pre-populate the data to the specific field. Follow the steps below to configure the extension to automatically read specific data from the webpage.

1. On the Add Integration screen, scroll to the specific field that you want to target.
2. Click the target icon, then click on the data that you want to read.
   
3. If the data is listed as an attribute for the HTML element, then check the Use Attribute checkbox to select the data from a list of attributes. For example, this option is helpful when the data is listed as a value (ex. value="test@demo.com"). We also use this option in our "Low Code Integration" example below.
   
4. If needed, select the Filter checkbox to use Regular Expressions to filter your data. In the following example, the first name is included within a string that also includes other information. Regular Expressions allows us to select only the first name from the string.
   
5. Repeat this step for every field that you want to automatically pre-populate in the extension.
6. Click Save.