Setup Guide

Bridge Widget

The Bridge widget is a drop-in framework that handles on\off ramping of NGN. It works with vanilla JavaScript and all major JavaScript frameworks.

Getting Started

  1. Sign up at (ngnc.online/user/kyb), once your NGNC account has been activated you will be eligible to access NGNC Bridge and customize the bridge widget to fit your business.

  2. Update your Bridge widget setup with your public key from the bridge credentials page.

Installation

Using NPM

npm install @ngnc/bridge

Using Yarn

yarn add @ngnc/bridge

Using unpkg CDN

<script src="https://unpkg.com/@ngnc/bridge"></script>

Import it into your project

import Bridge from "@ngnc/bridge"

Parameters

key

This is your Bridge public key from the Bridge dashboard 

const widget = new Bridge({ key: "Bridge_Public_Key" });

Your key is required

type

Enter the transaction type (buy / sell)

const widget = new Bridge({ key: "Bridge_Public_Key", type: "TYPE" });

The type of transaction is required

data

Parse in the transaction data to be sent 

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
})

The data object is required

onSuccess

This function is triggered when a user successfully performs a transaction.

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    onSuccess: (response) => console.log(response)
})

This function is required

onLoad

This function is invoked when the widget has been mounted unto the DOM. You can handle toggling your trigger button within this callback.

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response),
    onLoad: () => console.log("Bridge widget loaded successfully")
});

onEvent

This method is called when certain events in the NGNC Bridge flow have occurred, for example, when the widget launches or when a transaction is successfully complete. This enables your application to gain further insight into the NGNC Bridge onboarding flow.

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response),
    onEvent: (eventName, eventDetail) => {
        console.log(eventName);
        console.log(eventDetail);
    }
})

onClose

This function is called when the user exit the bridge widget flow.

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response),
    onClose: () => console.log("Bridge widget has been closed")
})

setup()

This method is used to load the widget onto the DOM, the widget remains hidden after invoking this function until the open() method is called.

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response)
})

widget.setup();

open()

This method makes the widget visible to the user.

const widget = new Bridge({
    key: "Bridge_Public_Key",
    type: "TYPE",
    data: {
        amount: "0",
        network: "Stellar",
        wallet_address: "link_test@stellar"
    }
    onSuccess: (response) => console.log(response)
})

widget.setup();
widget.open();

Event Name

Event names correspond to the type key returned by the raw event data. Possible options are in the table below.

Event name
Description

OPENED

Triggered when the user opens the Bridge Widget.

AUTH__CREDENTIALS

Triggered when authenticating the API key

AUTH__SUCCESS

Triggered when the API key is valid

ERROR

Triggered when the widget reports an error.

NETWORK__SELECTED

Triggered when the user selects a network

LINKTAG__FOUND

Triggered when the users LINK_Tag is valid

TRANSACTION__SUCCESS

Triggered when a transaction is successful

TRANSACTION__FAILED

Triggered when a transaction fails

Last updated