Skip to main content

SDK

Overview

Woflow's Link is a widget designed for seamless integration into your applications. The core of this integration revolves around a JWT token, securely signed using a private key provided by Woflow. This guide will walk you through the setup, from JWT generation on your backend to widget initialization on the frontend.


Step 1: Obtain Your SDK Keys

Your unique private and public keys are crucial for the JWT creation and widget initialization. Locate them on the Settings page of the Merchant Data Platform.


Step 2: Setting up JWT on the Backend

Why JWT?

JWTs encapsulate the essential data for the widget, ensuring both data integrity and authentication. The private key keeps this process secure.

JWT Payloads

To construct a basic JWT payload, you must include user and store details. When specifying the store information, you have the option to provide both the address and token, but it's necessary to have at least one of these fields.

Basic:

{
"user": {
"email": "john@slothpos.com",
"first_name": "John",
"last_name": "Doe"
},
"store": {
"name": "Blue Bottle Coffee",
"address": "199 Sutter St, San Francisco, CA 94104",
"token": "7754214e-38d3-442c-adaa-0673b0cd98f0"
}
}

Advanced (with optional fields):

{
"user": {...},
...
"client_mappings": {
"store_uuid": "e38ba970-50e9-44a3-a2c7-30d19e659c18"
}
}

Generating the JWT

Utilizing your private key, sign your JWT. The official JWT website has a list of libraries you can use to help with this.

// https://github.com/auth0/node-jsonwebtoken
import jwt from "jsonwebtoken";

const generateToken = (payload) => {
const privateKey = <YOUR_PRIVATE_KEY>;
return jwt.sign(payload, privateKey, { algorithm: 'HS256' });
}

Step 3: Frontend Integration

Installing the SDK

npm install @woflowinc/link

Widget Initialization

Initialize the Link widget using the JWT obtained from your backend, your public key, and the Link configuration ID.

import { WoflowLink } from "@woflowinc/link";

const PUBLIC_KEY = <public_key>

const LINK_CONFIG_ID = <link_config_id>

const PAYLOAD = {
email: "john@slothpos.com",
...
}

const token = getJWTTokenFromBackend(PAYLOAD)

const options = {
jwt: token,
publicKey: PUBLIC_KEY,
linkConfigurationId: LINK_CONFIG_ID,
};

const link = new WoflowLink(options);

link.openIframe({
onData: (data) => console.log("Data from Woflow:", data),
onClose: () => console.log("Woflow SDK closed"),
});

With these steps, you'll have Woflow's Link widget seamlessly integrated into your application. For more advanced configurations or further assistance, please refer to our comprehensive API documentation or contact our support.