In This Section

In the borderless™ Link™ section of the borderless™ documentation you will find:

• borderless™ Link™ Overview
• How to Integrate borderless™ Link™
• borderless™ Link™ Responses
• borderless™ Link™ Product Shots

borderless™ Link™ Overview

Embed the /externalContacts endpoint directly into your application with borderless™ Link™. With borderless™ Link™, recipients follow the instructions on the Widget to add their data. borderless™ Link™ automatically configures and collects the data requirements for all borderless™ supported countries. Once a user inputs their information, borderless™ will create a unique and auto-generated @handle for API payouts (example: "@^28291AS"). To learn more about borderless™ @handles please visit @Handle Overview.

Integrating borderless™ Link™

Follow these steps to integrate borderless™ Link™ on your application.

Step 1: Create Page

Create the page that the widget will be integrated into.

Step 2: Integrate iframe

Create a div element with an iframe element nested inside it.

<div>
    <iframe/>
</div>

Step 3: Add URL

Add the appropriate url in the "src" attribute of the iframe element.

👍

Pro Tip

When generating the url, you must ensure that the correct JWT is included.

Use the following format:

<iframe src="https://secure.getborderless.com/widgets/add-external-contact?token={your JWT token here}" />

Example url:
https://secure.getborderless.com/widgets/add-external-contact?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3N1ZXIiOiJja3hwNDA5bnQwMDc2MDk3OHo5d3NubTZhIiwiaWF0IjoxNjQyNzg2ODk2fQ.iAPLNOUwQICuHH4cFhcF8CSmYvW0BDMGlUFYyTnSn8s

👍

Pro Tip

To launch the Widget in Sandbox please use the following URL format:

JavaScript

   <iframe src="https://sandbox.secure.getborderless.com/widgets/add-external-contact?token={your JWT token here}" />

Step 4: Customize Widget (Optional)

Add title, height, and width specifications to the Widget.

<div>
    <iframe title="widget" width="600px" height="900px" src="https://secure.getborderless.com/widgets/add-external-contact?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3N1ZXIiOiJja3hwNDA5bnQwMDc2MDk3OHo5d3NubTZhIiwiaWF0IjoxNjQyNzg2ODk2fQ.iAPLNOUwQICuHH4cFhcF8CSmYvW0BDMGlUFYyTnSn8s" />
</div>

👍

Pro Tip

The borderless™ Widget is designed to dynamically adjust the data requirements based on Country and Account Type. Required fields can be found at the /externalContact/requiredInformation endpoint.

Customization Options

Depending on your API package you can customize the look and feel of your Widget from the Developer tab of your borderless™ Dashboard, including these options.

Widget Responses

When a user submits their information through the Widget, the borderless™ API will provide a response. Responses are sent via postMessage (Click here to learn more about postMessage. To access the response data you will need an eventListener to listen for incoming messages.

There are two types of responses you may receive:

1. Success (Status of "Pending" or "Approved")
2. Error

Successful Contact Creation

When a user successfully submits their information through the Widget, the Contact status will be sent to your application via postMessage.

window.addEventListener('message', e => {
    console.log(e.data) // { externalContactId: ^xxxxx, status: “APPROVED” }
});

Error

When a user is unsuccessful in submitting their information through the Widget, an Error message will be displayed to the user and also sent to your application via postMessage.

window.addEventListener('message', e => {
    console.log(e.data) // { message: “Sorry, this email is already associated with an account. Please pay them using their handle: @{contactSlug} (I-6303)” }
});

Widget Product Shots

For Widget product shots please refer to the borderless™ Link™ Widget Overview.