Skip to main content

JavaScript SDK

Integration

There are two methods to integrate the JavaScript SDK, via a build tool such as Webpack or by importing the SDK directly in your HTML source.

We have made two separate sample applications for each integration. You can reference either the direct integration sample or the build tool integration sample depending on your specific needs.

Direct Integration

This HTML code dynamically loads and uses the Link JavaScript library from (https://static.link.money/linkmoney-web/v1/latest/linkmoney-web.min.js).

Object config

  • sessionUrl: The URL for starting the browser session, which is the value provided in the response of the API session call.
  • environment: This specifies whether to use the ‘production’ or ‘sandbox’ environment.
  • sessionVersion: This specifies the version of the session.

Notes: Ensure that sessionUrl is replaced with actual values before deploying this code.

HTML Script
1<html>
2  <body>
3    <div id="btnContainer"></div>
4	<script type="module">
5	  import Link from 'https://static.link.money/linkmoney-web/v1/latest/linkmoney-web.min.js';
6	  const config = {
7		sessionUrl: '{SESSION_URL_FROM_SESSION_CALL}';
8		environment: 'production'|'sandbox',
9		sessionVersion: 2,
10	  };
11	  const link = Link.LinkInstance(config);
12	  document.getElementById('btnContainer').appendChild(link.createButton());
13	</script>
14  </body>
15</html>
16

Build Tool

Use your preferred package manager to retrieve the latest version of the SDK.

npm
npm install @link.money/linkmoney-web
yarn
yarn add @link.money/linkmoney-web

Note: to ensure you stay on top of the latest version releases.

Once you've retrieved the SDK, import it into your component.

Component
1import Link from '@link.money/linkmoney-web'
2
3const getButton = (sessionUrl, environment) => {
4	const config = { 
5		sessionUrl,
6		environment,
7        sessionVersion: 2
8	} 
9
10	const link = Link.LinkInstance(config); 
11	return link.createButton();
12}
13
14export const renderHTML = (sessionUrl, environment) => {
15	return (
16		<div ref={(ref) => ref.replaceChildren(getButton(sessionUrl, environment))}></div>
17	);
18};

Usage

You can now use the following classes and interfaces to set up bank account linking and payments. Link Money's Javascript SDK is Typescript-enabled. Please note that before you start your production integration you will need to let Link Money know what URL you are redirecting your users to so as to avoid malicious exploitations.

Start by using the static factory in the Link class by calling Link.LinkInstance(Config). The Config interface specifies the URL provided by Link Money via the v2/session API to which your customer will be redirected to after linking their bank account along with session version. Environment should be either production or sandbox depending whether you are in testing or production. The CreateButton function will return a Link Money branded HTML button object that can be surfaced on your UI.

If the appropriate fields were provided when collecting the session token, the SDK will take your customer through an experience where the payment is authorized by the customer on the Link Money UI and Link Money initiates the payment request directly.

The Link static class is the entry point to linking bank accounts. To begin initiating bank account linking, you can call Link.LinkInstance(Config).

Methods

  • getLinkInstances

    () => LinkAction[]

    Retrieves all LinkInstances within the static factory

  • LinkInstance

    (config: Config) =>

    LinkAction

    Returns a new LinkInstance

Config

Information to pass when creating a LinkInstance.

Properties

  • sessionUrl

    string

    URL for initializing the browser session. To be collected from the response of v2/session

  • sessionVersion

    number

    Session API [2]

  • environment

    string

    production or sandbox

LinkAction

Interface for LinkInstances. Since properties are private, they will only be available for LinkInstances instantiated by your code.

Method Summary

  • createButton()

    () => HTMLButtonElement

    Creates an HTML button object used to redirect your customer to Link Money's account-linking & payment flow

  • getLinkInstances(

    () => LinkAction[]

    Retrieves all Linkinstances within the static factory

  • LinkInstance

    (config:Config) => LinkAction

    Returns a new Linkinstance

  • getLinkSessionVersion

    () => number

    Returns session version

Properties

  • initiated

    boolean

    Indicates the status of a link or pay action

Method Details

createButton()

Calling link.createButton() will return an HTML button object that should be surfaced on your UI and used to redirect your customer to Link Money's account-linking & payment flow. After either success or failure, Link Money will redirect your customer back to the redirect URL provided in the Config or the session API with the following parameters.

  • status

    number

    • 200: The customer successfully linked a bank account and payment request successfully created 
    • 204: Customer exited voluntarily
    • 500: Error occurred

  • customerId

    string

    Contains the newly-generated customer ID. You must retain this value to use for payments.

  • paymentId

    string

    Link-Money-generated, payment-related ID

  • paymentStatusCode

    number

    • 0: AUTHORIZED - Transaction was authorized for payment
    • 1: TERMINAL_FAILED - Transaction did not complete successfully or was declined
    • 2: PENDING - Transaction is pending further review

Example
{REDIRECT_URL}/?status=200&customerId={CUSTOMER_ID}&paymentId={PAYMENT_ID}&paymentStatusCode=0