Ce contenu n’est pas encore disponible dans votre langue.

Vanilla JS Integration Guide

This guide will walk you through the process of integrating the Wallet SDK into your Vanilla JavaScript application. By the end, you’ll have a basic setup that allows users to connect their Frak Wallet and perform simple interactions.

Prerequisites

Before you begin, ensure that:

You have a basic HTML/JavaScript project set up.
You have a merchant account on the Frak business dashboard with your storefront’s domain registered. The main domain is registered automatically at sign-up; for subdomains, add them under Allowed Domains on the dashboard.

If you haven’t completed these steps, please refer to the Getting Started guide.

Step 1: Install Dependencies

For a Vanilla JS project, you can include the Wallet SDK via a CDN. Add the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@frak-labs/core-sdk@latest/cdn/bundle.js"></script>

Step 2: Set Up the Frak Client

Create a new JavaScript file (e.g., frak-setup.js) to set up the Frak client:

const frakConfig = {
  metadata: {
    name: 'Your App Name',
  },
};

async function setupFrakClient() {
  const client = await FrakSDK.setupClient({ config: frakConfig });
  if (!client) {
    console.error('Failed to create Frak client');
    return null;
  }

  return client;
}

// Export the setup function and config for use in other files
window.FrakSetup = { setupFrakClient, frakConfig };

For more detailed configuration options, see FrakWalletSdkConfig.

Include this script in your HTML file:

<script src="frak-setup.js"></script>

Step 3: Check Wallet Status

Create a function to check and display the wallet status, using the watchWalletStatus action:

async function displayWalletStatus() {
  const client = await window.FrakSetup.setupFrakClient();
  if (!client) {
    console.error('Frak client not initialized');
    return;
  }

  const statusElement = document.getElementById('wallet-status');
  statusElement.textContent = 'Checking wallet status...';

  try {
    await FrakSDK.watchWalletStatus(client, (status) => {
      statusElement.textContent = `Wallet status: ${status.key === 'connected' ? 'Connected' : 'Not connected'}`;
    });
  } catch (error) {
    statusElement.textContent = `Error: ${error.message}`;
  }
}

// Call this function when the page loads
window.addEventListener('load', displayWalletStatus);

Create a function to handle the login process, using the displayModal action:

async function handleLogin() {
  const client = await window.FrakSetup.setupFrakClient();
  if (!client) {
    console.error('Frak client not initialized');
    return;
  }

  const loginButton = document.getElementById('login-button');
  loginButton.disabled = true;
  loginButton.textContent = 'Logging in...';

  try {
    await FrakSDK.displayModal(client, {
      steps: {
        login: {},
        final: {
          action: { key: "sharing" },
        }
      }
    });
    loginButton.textContent = 'Logged In';
  } catch (error) {
    console.error('Login error:', error);
    loginButton.textContent = 'Login Failed';
  } finally {
    loginButton.disabled = false;
  }
}

// Attach the login handler to the button
window.addEventListener('load', () => {
  const loginButton = document.getElementById('login-button');
  loginButton.addEventListener('click', handleLogin);
});

Step 5: Put It All Together

Update your HTML file to include all the necessary elements and scripts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Frak-Enabled App</title>
    <script src="https://cdn.jsdelivr.net/npm/@frak-labs/core-sdk@latest/cdn/bundle.js"></script>
    <script src="frak-setup.js"></script>
    <script src="wallet-status.js"></script>
    <script src="login-button.js"></script>
</head>
<body>
    <h1>My Frak-Enabled App</h1>
    <div id="wallet-status">Initializing...</div>
    <button id="login-button">Login with Frak</button>
</body>
</html>

Next Steps

With this setup, you have a basic Vanilla JavaScript application integrated with the Wallet SDK. Users can now connect their Frak Wallet and log in. From here, you can start implementing more advanced features such as:

Sending interactions
Implementing referral systems
Creating reward campaigns

Refer to the specific action documentation for details on implementing these features in a Vanilla JS environment.