This section explains how we can we can use a "low code" approach to establish a stronger integration between your software and PayJunction's No-code Payments Integration extension. To accomplish this, you can use specific id's in your code so that we can easily target these fields during the automation.

Table of Contents

1. Low Code Integration Example
   1. Include customer data on the payment page.
   2. Map customer data to the No-code Payments Integration extension.
2. Low Code Automation Example
   1. Map form fields and actions.
   2. Build the automation procedure.
3. Low Code Automation for Recurring and Invoices
   1. Provide a unique id for every transaction.
   2. Setup a webhook.
   3. Get the transaction data.
   4. Update the customer record in the database.

Low Code Integration Example

Step 1) Include customer data on the payment page

Add an HTML element on your payment page and include id="pj-data".  Any HTML element can be used (div, span, td, etc.).  For example:

<div id="pj-data"></div>

<span id="pj-data"></span>

<td id="pj-data"></td>

Include the customer transaction information as attributes in the HTML element. Every field is optional. In the following example, we use a hidden div element and we include all of the customer transaction fields:

  <div style="visibility: hidden" id="pj-data" data-first-name="Doug" data-last-name="Smith" 
  data-amount="1,000" data-email="doug@test.com" data-invoice="INV-0001" data-po="PO-0001" 
  data-customer-id="123456" data-phone="(800)123-4567" data-address="1903 State" data-zip="93101" 
  data-note="Payment for services."></div>

The following fields can be mapped to the No-code Payments Integration extension.

data-amount="100.00"

data-email="johndoe@example.com"

data-invoice="INV-00123"

data-po="PO-3456"

data-customer-id="CUST-987654"

data-phone="800-123-4567"

data-first-name="John"

data-last-name="Doe"

data-address="1903 Street"

data-zip="93101"

data-note="Payment for services."

Step 2) Map customer data to the No-code Payments Integration extension

1. Transaction Amount
   1. Map Transaction Amount: Enter the following xPath: //*[contains(@id, "pj-data")]
      
   2. Check the box for Use Attribute
      
   3. Select the data-amount from the drop-down menu.
      
   4. The final result will look like the image below. Notice that the value (i.e. amount) is displayed to confirm that the data is correct.
      
   5. Repeat this process for all of the fields that you want to map. See example below.
      

Examples for all remaining fields:

1. Email
   1. Map Email: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-email from the drop-down menu
2. Invoice Number
   1. Map Invoice Number: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-invoice from the drop-down menu
3. Purchase Order Number
   1. Map Purchase Order Number: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-po from the drop-down menu
4. Customer ID
   1. Map Customer ID: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-customer-id from the drop-down menu
5. Phone
   1. Map Phone: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-phone from the drop-down menu
6. First Name
   1. Map First Name: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-first-name from the drop-down menu
7. Last Name
   1. Map Last Name: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-last-name from the drop-down menu
8. Address
   1. Map Address: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-address from the drop-down menu
9. Zip
   1. Map Zip: //*[contains(@id, "pj-data")]
   2. Check the box for Use Attribute
   3. Select the data-zip from the drop-down menu
10. Note
    1. Map Note: //*[contains(@id, "pj-data")]
    2. Check the box for Use Attribute
    3. Select the data-note from the drop-down menu
11. Save
    1. Click the Save button to save your work
       

Low Code Automation Example

This section explains how we can use a "low code" approach to establish a stronger integration between your software and PayJunction's No-code Payments Integration extension. To accomplish this, you can use specific id's in your code so that we can easily target these fields during the automation.

Step 1) Add unique id's for the HTML elements that you want to target

We can use xPaths to target specific HTML elements with ids or classes.  Any id or class can be targeted with xPaths.

In the following example, we use three unique id's to easily identify the HTML elements that we want to target during our automation:

• Unique id pj-auto-step-1.
  • While setting up our automation below, we will use an xPath to target this field. We will then automatically input the Total Amount in the text field.
• Unique id pj-auto-step-2: 
  • While setting up our automation below, we will use an xPath to target this field. We will automatically input the Transaction ID for the approved transaction.
• Unique id pj-auto-step-3: 
  • While setting up our automation below, we will use an xPath to target this field. We will automatically click the submit button to record the payment.

  <form method="POST" action="record-payment.php"> 
    Amount Paid:
    <input id="pj-auto-step-1" type="text"><br>
  
    Transaction ID:
    <input id="pj-auto-step-2" type="text"><br>
    
    <input id="pj-auto-step-3" type="submit" value="Submit"> 
  </form>
  

Step 2) Create an automation by targeting the fields with unique id's

In the following example, we build a simple automation that will automatically input the Total Amount that was paid in the field named "Amount Paid". Next, we will automatically input the Transaction ID into the Transaction ID field. Last, we will automatically click the Submit button to save the payment details.

1. Click Add a Step
   • Enter the following xPath in the Choose Element field: //*[contains(@id,"pj-auto-step-1")]
   • Select the type of automation (click, wait, input, dropdown) and the action.
2. Click Add a Step
   
   • Enter the following xPath in the Choose Element field: //*[contains(@id,"pj-auto-step-2")]
   • Select the type of automation (click, wait, input, dropdown) and the action.
3. Click Add a Step
   
   • Enter the following xPath in the Choose Element field: //*[contains(@id,"pj-auto-step-3")]
   • Select the type of automation (click, wait, input, dropdown) and the action.

Low Code Automation for Recurring and Invoices

Webhooks provide immediate notifications when a payment has been approved. This allows your software to automatically update records when payments are completed.

1) Provide a unique id for every transaction

First, make sure to include a unique identifier for every transaction. The unique id should correlate back to a specific record that will need to be updated.

For example, we can send a unique Invoice Number for every Invoice that we send, or a Purchase Order for every Recurring profile that is created. When a payment is approved, you will find the Invoice Number (or Purchase Order) in the response every transaction.

Tip: Make sure to automatically map the Invoice field in the extension (as explained above) to ensure every transaction includes an Invoice Number. 

2) Setup a webhook

A webhook can be registered directly within the No-code Payments Integration extension, or via our API. To setup a new webhook within the extension, go to: Settings >> Webhook Settings

Select the Webhook event and enter the URL for your webhook.

For example, the Transaction webhook event will send a notification for every approved transaction. 

Example webhook payload

Every webhook notification will include a transactionId. Capture the transactionId, then go to the next step.

{
  "id" : "2bc89720-2c25-4765-93cf-b695bd3801da",
  "created" : "2020-03-05T17:52:10.557Z",
  "type" : "TRANSACTION",
  "data" : {
    "transactionId" : 101
  }
} 

3) Get the transaction data

Use the GET transactions/{transactionId} endpoint to retrieve the transaction data for the transactionId that was provided by the webhook.

Example response (displaying partial data) - Click here to view a full response and additional details.

{
{
      "transactionId": 101, 
      "uri": "https://api.payjunction.com/transactions/3601", 
      "terminalId": 1, 
      "scheduleId": 83,
      "action": "CHARGE", 
      "amountBase": "1.00", 
      "amountTax": "1.00", 
      "amountShipping": "1.00", 
      "amountTip": "1.00", 
      "amountSurcharge": "1.00", 
      "amountTotal": "5.00",
      "custom1": "88888888444444444444cccccccccccc",
      "invoiceId": "6de5394f-5e3b-469e-bc19-01fcc27c2724",
      "invoiceNumber": "Invoice 5", 
      "purchaseOrderNumber": "Custom PO", 
      "method": "KEYED",
      "service": "RECURRING",
      "status": "CAPTURE",
      "signatureStatus": "SIGNED", 
      "created": "2013-11-18T22:15:32Z", 
      "lastModified": "2013-11-18T22:15:32Z", 
      ...

4) Update the customer record in the database

Pull the unique id from the transaction data (Invoice or Purchase Order) to locate the record in your software/database that needs to be updated. You can use any of the information that's provided in the GET response (step 2 above) to update the record with the appropriate/necessary details (name, amount, last 4, etc).