Link Money SDK JavaScript Integration

Overview

Link Money's SDKs can be used to link your customers' bank accounts to Link Money services. UI/UX certification for the UI setup must be done with the Link Money team.

Link Money Checkout Flow

Complete the following series of step to integrate the Link Money SDK with your checkout.

Import the SDK directly in your HTML source

Add this script tag to your page to display the 'Pay by Bank' button. Please refer to Link Money's documentation for their JavaScript SDK for more details.

Copy this code sample. 
<html>
    <body>
        <button id="link-btn">Pay by Bank</button>
        <script type="module">
        import Link from 'https://static.link.money/linkmoney-web/v1/latest/linkmoney-web.min.js';

        document.addEventListener(
            'DOMContentLoaded',
            () => {
                    document
                        .getElementById('link-btn')
                        .addEventListener('click', async function () {
                            const config = {
                                sessionKey: '{SESSION_KEY}',
                                redirect: '{REDIRECT_URL}',
                                environment: 'production' | 'sandbox'
                            };

                            const link = Link LinkInstance(config);
                            link.action();
                    });
                },
            false
        );
        </script>
    </body>
    </html>

 

Element

Description

Type

Restriction

SESSION_KEY

Session Key returned from the Link Money Gateway. This session key is used to link the Customer's Bank account with Link Money.

String

Max 256 characters

REDIRECT_URL

URL customer will be redirected to after success or failure - must be pre-approved by Link Money

String

environment

This value can be 'production' or 'sandbox'. Production is for production/live environment and Sandbox is for sandbox or test environments.

String

 

Linking with bank account flow example

The screens shown below are examples for the flow when a bank account is linked with Link Money. The first screen is invoked by clicking on the Pay by Bank button using the SDK described above, and the remaining screens come up automatically. There is no link with Radial during this flow.

  1. When a customer clicks the Pay by Bank button, the page shown below is displayed. The customer must click the Get started button to start the linking process.

  2. The customer can choose any bank listed here.

  3. The customer can also search for any specific bank, as shown below.

  4. When the customer selects a bank, a screen is displayed where the customer must click Link checking account.

  5. The customer is redirected the bank login page as below. The bank login page shown below is an example; each bank's login page can be different.

  6. The customer must enter the Banking Userid and Banking Password and click Submit.

  7. The customer can select any of the account displayed here and click Continue. The selected account will be used for the payment.

  8. The linking bank account process gets started. When the account is successfully linked, the Account Linked screen shown below is displayed.

  9. When the customer clicks Done in the screen shown above, the customer is redirected to the webstore's redirect url (given in javascript) with customer ID appended. This customer ID should be sent in Get Payment Authorization request.

    An example of a redirect URL: http://{REDIRECT_URL}/redirect?status=200&customerId=5d0eef23-7f2d-48a8-9024-545d5d39b020

    In addition to this URL format, which contains status value 200 and the customer id, any other URL format should be considered as a failure case, which can happen when linking failed or the customer closed the popup during the linking process.

Link Money Checkout using On-Site Messaging feature

On-Site Messaging enables merchants to optimize the adoption of the Pay by Bank product by making available a set of custom elements using an easy to integrate JavaScript library. On-Site Messaging is a dynamic feature that empowers merchants to deliver customized content and messages directly on their platforms. After seamless integration with the Pay by Bank product, On-Site Messaging becomes a valuable tool to boost traffic to the payment method, effectively conveying its value and educating your customers.

Implementation Details

The following recommendations are meant to be implemented into both desktop and in mobile web wherever Link Money is referenced. The screenshots provided below are examples of what the implementations could look like on a Radial Merchant’s User Interface. For more information, see Link Money On-Site Messaging.

  1. Display the Link Money Product as the top option or as close to the top as possible at checkout.

  2. Use the Link Money On-Site Messaging feature to surface all Pay by Bank assets and verbiage. Include the following elements at checkout:

    • Pay by Bank Badge: This element will surface the badge intended for checkout use.
    • Pay by Bank Text: This element will surface the product name intended for checkout use.
    • Checkout CTA: This element will surface educational/promotional text that contains a clickable link that will surface the modal. Text and linked connection to modal are configured by Link Money.

  3. Use the Find Accounts by Customer ID API to retrieve and surface customer Billing Method for Billing Summary and Account pages.

Implementation steps

  1. Paste the On-Site Messaging Script Tag on your HTML Page.

    To begin, paste the On-Site Messaging Script Tag in the page where you intend to display On-Site Messaging.

    Copy this code sample. 
    <html>
    <head>
        <script async src="https://static.link.money/messaging/js/v1/messaging.js">
    </head>
    </body>

  2. Navigate to the On-Site Messaging page in the Merchant Portal and look for the tile pictured below.

    Collect your unique publish key to gain access to the Link Money On-Site Messaging element library. You will paste this unique key (shown below) alongside the elements you choose to surface on your page.

    If this below portal access is not available, please ask Radial for the publish key. Radial will get publish keys for sandbox and production environments from Link Money.

Billing Method

Pay by Bank Badge

  • This element will surface the badge intended for checkout use. Dimensions are configured by Link Money.
  • Place the element in the checkout wherever the customer will select their preferred payment method.

Add link-money-paybybank-badge tag

Copy this code sample. 
<body>
    <link-money-paybybank-badge publish-key="my-publish-key" />
</body>

Pay by Bank Text

  • This element will surface the product name intended for checkout use. Text content configured by Link Money.
  • Place this element in the checkout wherever the “Pay by Bank” product will be named.
Add link-money-paybybank-text tag
Copy this code sample. 
<body>
    <link-money-paybybank-text publish-key="my-publish-key" />
</body>

Checkout CTA Text

  • This element will surface educational/promotional text that contains a clickable link that will surface the modal. Text and linked connection to modal configured by Link Money.
  • Place the element in the checkout wherever the customer will select their preferred payment method alongside the Text.
Add link-money-cta-text tag
Copy this code sample. 
<body>
    <link-money-cta-text publish-key="my-publish-key" />
</body>

Billing Summary

Payment Options (Footer)

Next Step

After the Customer's Bank account is successfully linked, Link Money will redirect to the Webstore redirect URL with the CUSTOMER_ID. Then the next step is a Get Payment Authorization Request call.