Browser SDK

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!)

Table of Contents

• Installation
• Quick Start
• Advanced Configuration
• API Reference
• Development

Installation

You can install the SDK using npm:

npm i --save connext

Quick Start

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();

Advanced Configuration

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.

API Reference

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

Development

To work on the Connext Browser SDK itself:

$ git clone git@github.com:connext/browser-connext.git
$ make browser-sdk

Now, you should be able to open the demo and test like so:

$ make start