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

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

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.

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