Links
🌎

Browser ("Web3")

Building a web app? Running as a client side SPA (single page webapp) or server side rendered? React Native / VueJS / VanillaJS / etc.: you can integrate with the Xumm ecosystem using our SDK.
The Xumm SDK can run fully client side: either as part of your compiled web app or using plain HTML and Javascript using our ready to use browserified version.
Using the Xumm SDK, you can easily add "Sign in with Xumm" capabilities to your web app. You don't even need a backend. You get the full "Web3" experience (sign in with a blockchain account) with our "Web2" compatible stack (see: Broken link).

Capabilities

Using the Xumm SDK in your web project, you get:
  • Sign in with a QR code for when loaded on a desktop
  • Deeplink (redirect to Xumm, back to your web app) on mobile
  • Basic user information: XRP Ledger account address, icon (hashicon or even avatar), connected chain (mainnet, testnet, ..) & some basic information about the end user's environment (currency, language, ...)
  • An access token (JSON Web Token "JWT") valid for 24h, to actively send (push) Sign Requests (transactions for the end user to sign)

Sample code

Please note the xumm.authorize() and xumm.logout() methods:
1
<html lang="en">
2
<body>
3
<h1 id="accountaddress">...</h1>
4
<button id="signinbutton" onclick="xumm.authorize()">Login</button>
5
<button id="logoutbutton" onclick="xumm.logout()">Logout</button>
6
7
<script src="https://xumm.app/assets/cdn/xumm.min.js"></script>
8
<script>
9
var xumm = new Xumm('your-api-key')
10
11
xumm.on("ready", () => console.log("Ready (e.g. hide loading state of page)"))
12
13
// We rely on promises in the `success` event: fired again if a user
14
// logs out and logs back in again (resets all promises)
15
xumm.on("success", async () => {
16
xumm.user.account.then(account => {
17
document.getElementById('accountaddress').innerText = account
18
})
19
})
20
​
21
xumm.on("logout", async () => {
22
document.getElementById('accountaddress').innerText = '...'
23
})
24
</script>
25
</body>
26
</html>
For the SDK documentation (objects, methods), see the SDK section: SDK (syntax). For a simple demo of the Xumm SDK in a React Native environment, check this sample repository: https://github.com/XRPL-Labs/XummSDK-React-Demo​
​