Skip to content

Integration Guide

The Payment Link script allows you to seamlessly and quickly add payment processing functionalities to your merchant portal front-end with a simple, low-code dashboard integration. This script conveniently facilitates all of the available /public/merchant API endpoint functionality into your existing front-end UI using a single script tag. Once embedded, the merchant dashboard will allow merchants to view their profile details, update or view their logo(s), generate new payment links, update or view payment link details, send payment links to a customer to request payment, cancel payment links (cancellation is limited to allowed statuses), view/export lists of payment links, upload/view/list/remove an invoice file associated with a payment link, handle refunds, and manage payment reminders and notifications. In the merchant dashboard, the payment links for the authenticated merchant will be displayed in a tabular list, providing a convenient way for the merchant to view invoice details at a glance, track the current status of payment links, and to search for or filter payment links based on chosen criteria.

The following guide includes instructions for integration of the low-code Payment Link merchant dashboard script into your existing front-end merchant portal.

Step 1: Include the Payment Link script

The Payment Link script will first need to be included in your HTML as shown below, preferably just before the closing body tag.

Script Integration

<script async="true" type="module" src="{{base-url}}/payment-link-v1.js"></script> <!-- The payment link script -->

Set Up Content Security Policy (CSP)

To enhance the security of your integration, in production you should add a Content Security Policy (CSP) header to your server configuration or the meta tag in your HTML document. The example below assumes that the Payment Link script is hosted on a trusted domain. For production, the baseUrl will be http://connectfi-payment-link-public.pg-prod-box.com/.

Content-Security-Policy:
  script-src 'self' ${baseUrl};
  connect-src 'self' ${baseUrl};

Step 2: Initialize PayLink

Once the Payment Link script has been included, the PayLink object will be available in the window object of the browser. The PayLink object provides the methods necessary to enable the browser to create and manage the Payment Link Iframe element, which faciliates /public/merchant requests. In the following examples, the parameter containerId represents the ID of the HTML element where the iframe will be inserted and the parameter token represents the merchant JWT for the current merchant session.

window.PayLink.CreatePayment({ containerId, token });

Update the token when necessary

The merchant JWT will expire 1 hour after issue. Your portal is able to extend the merchant session by updating the token. It is recommended to request a new merchant JWT approximately 55 minutes after issuing. The new merchant JWT will then be used to update the token for the current merchant session. In the example below, token represents the newly issued merchant token.

window.PayLink.updateCreatePaymentToken(token);

Additional PayLink methods are documented in a separate PayLink Reference document. Note that merchants can be added, updated, and managed through the available no-code connectFi client Dashboard, as well as through our traditional /payment-link/merchant REST API endpoints. The connectFi client dashboard allows you to search, view, and export records and reports specific to the services you utilize, including Payment Link services. It is designed to provide a convenient way to view a broad summary of relevant data for each service, with the flexibility to quickly access specific records when desired. Speak to a customer service representative for more information regarding managing services through the connectFi Dashboard.