API Reference
Log In
API Reference

borderless™ Link™ Recipes

In This Section

In the borderless™ Link™ Recipes section you will find step-by-step recipes for integrating the borderless™ Link™ Widget into your product. Below you will find recipes to:

  • Integrate borderless™ Link™
  • Customize borderless™ Link™

🚧

Deprecation warning!

In order to enhance security of borderless™ Link™, identifying widget with JWT token will be deprecated. New identification will have to be retrieved through a dedicated endpoint. The obtained widgetId, serving as the unique identifier, will subsequently be utilized in constructing the widget URL.

During the transition period, both authentication methods will work but we strongly advise you to switch over to new and enhanced method.

borderless™ Link™ Integration Recipe

StepCorresponding Code (JavaScript)
Generate Unique Widget id -
Use /authentication/widget endpoint to retrieve widgetId (unique widget identifier that will be used to authenticate the widget).
Create Widget iFrame - Create a div element with an iframe element nested inside it. Add the appropriate url in the "src" attribute of the iframe element. Authenticate the widget with unique widgetId.<div>
 <iframe
   src="https://secure.getborderless.com/widgets/add-external-contact?widgetId={unique widget identifier}" />
</div>
Set up Event Listener - To access the response data you will need an eventListener to listen for incoming messages. This will catch success and error messages from your widget
window.addEventListener('message',e => {
  console.log(e.data)
// Contact added successfully:
// { externalContactId: ^xxxxx, status: “APPROVED” }
});

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

Customize borderless™ Link™ Recipe

StepCorresponding Code (JavaScript)
Pass contact data - Use the /externalContact/requiredInformation endpoint to receive information about contact requirements by country. Then, pass already collected contact's data in the URL (additional data parameters names are the same as you were to submit POST request /externalContact).<div>
 <iframe
   src="https://secure.getborderless.com/widgets/add-external-contact?widgetId={unique widget identifier}&firstName=Dalia&currency=USD&country=US" />
</div>
Get Widget Customizations - Use the /externalContact/widgetCustomizations endpoint to receive information about widget customization options.
const options = {
 method: 'GET',
 headers: {
  Accept: 'application/json',
  Authorization: 'Bearer USER'
 }
};

fetch('https://prod.api.getborderless.com/externalContact/widgetCustomizations', options)
 .then(response => response.json())
 .then(response => console.log(response))
 .catch(err => console.error(err));
Customize Widget iFrame - 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?widgetId={unique widget identifier}" />
</div>