Comment on page
Bridge SDK Guide
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.
- 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.
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"
This is your Bridge public key from the Bridge dashboard
const widget = new Bridge({ key: "Bridge_Public_Key" });
Your key is required
Enter the transaction type (buy / sell)
const widget = new Bridge({ key: "Bridge_Public_Key", type: "TYPE" });
The type of transaction is required
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
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
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")
});
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);
}
})
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")
})
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();
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 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 modified 3d ago