The Connext Browser SDK is the simplest way to add micropayments to any web app.
Connext is the protocol for p2p micropayments, built using state channels on the Ethereum blockchain. This SDK creates a Connext client inside of an iframe in your browser page, and then uses that client along with some minimal UI components to dispatch transfers to a recipient.
The SDK supports the following features:
- ๐ฉ Email-based login via Magic.
- ๐ณ Debit card on/offboarding via Moonpay.
- โฝ End-to-end Ethereum gas (transaction fee) abstraction.
- ๐ต Transfers in USD by default, with optional customizeability to other currencies.
- ๐ฆ Login using any popular Ethereum wallet such as Metamask. (coming soon!)
You can install the SDK using npm:
npm i --save connext
After installing, import the SDK into your web app, instantiate it and open the login UI.
import ConnextSDK from "connext";
const connext = new ConnextSDK();
await connext.login();
Note that by default the sdk will spin up in staging
mode on the Rinkeby Ethereum testnet. You will be able to create and send transactions, but they will not use real money. To send real-world value, you can instantiate the sdk in production
mode:
const connext = new ConnextSDK("production");
After going through the login flow, your SDK is now ready to go! Open the deposit UI to put funds into Connext:
await connext.deposit();
You can query balance or the user's SDK identifier with:
const id = connext.publicIdentifier; // id = "indra123abc..."
const balance = await connext.balance(); // balance = "1.234567"
And send micropayments using a recipient identifier and amount:
await connext.transfer("indra987zxy...", "12.5");
Lastly, to open the withdraw UI:
await connext.withdraw();
By default the browser SDK uses Dai, a USD-stable token on Ethereum, and connects to our bootstrap Connext node on testnet or mainnet.
You can use the SDK with your own Connext node and/or token too -- just pass in the following when instantiating:
const connext = new ConnextSDK({
tokenAddress: "0xabc123...",
nodeUrl: "https://node.example.com",
ethProviderUrl: "https://infura.com/abc123",
});
Note that our bootstrap nodes will not work with custom assets. If you are using your own token, you will need to run your own Connext node.
Method | Example | Description | Params | Response |
---|---|---|---|---|
instantiation | const connext = new ConnextSDK('production'); |
Instantiates SDK with provided config (defaulting to 'sandbox' mode) |
Either of: String: 'production' or: ConfigObject: { tokenAddress : token address ethProviderUrl : Ethereum node RPC url nodeUrl : Connext node url } |
|
login |
await connext.login(); |
Opens the login UI | ||
publicIdentifier |
const id = connext.publicIdentifier; |
Gets the user's unique public identifier | String e.g. indra123abc... |
|
deposit |
await connext.deposit(); |
Opens the deposit UI | ||
withdraw |
await connext.withdraw(); |
Opens the withdraw UI | ||
balance |
await connext.balance(); |
Gets the user's balance | String e.g. 0.12456 |
|
transfer |
await connext.transfer(id, amount); |
Sends amount to the specified public identifier | - String: public identifier of recipient - String: amount to send | |
getTransactionHistory |
await connext.getTransactionHistory(); |
Gets a history of previous transactions | //TODO | |
logout |
await connext.lougout(); |
Logs user out and resets SDK state |
To work on the Connext Browser SDK itself:
$ git clone [email protected]:connext/browser-connext.git
$ make browser-sdk
Now, you should be able to open the demo and test like so:
$ make start