@spotdraft/clickwrap-client-sdk

A framework-agnostic TypeScript SDK for implementing SpotDraft Clickwrap functionality in any JavaScript/TypeScript project.

Features

• 🚀 Framework Agnostic: Works with React, Vue, Angular, Svelte, or plain JavaScript
• 📦 TypeScript Support: Full TypeScript definitions included
• 🌐 Universal: Supports both ESM and CommonJS
• 🔧 Easy Integration: Simple API for quick implementation
• 📱 Browser Ready: Works in all modern browsers

Installation

npm install @spotdraft/clickwrap-client-sdk

Development

Building the Package

# Build the complete package (CJS, ESM, types, and CDN version)
nx run clickwrap-client-sdk:build

# Build individual parts
nx run clickwrap-client-sdk:build-cjs    # CommonJS build
nx run clickwrap-client-sdk:build-esm    # ESM build
nx run clickwrap-client-sdk:build-types  # TypeScript declarations
nx run clickwrap-client-sdk:build-loader # CDN/bootstrap build

Publishing

# Show publish instructions
nx run clickwrap-client-sdk:publish

# Publish with specific version and tag
nx run clickwrap-client-sdk:publish-version --args="1.0.0 latest"

# Dry run (recommended first)
node tools/scripts/publish.mjs clickwrap-client-sdk 1.0.0 latest --dry-run

# Actual publish
node tools/scripts/publish.mjs clickwrap-client-sdk 1.0.0 latest

Usage

Basic Usage

import { SdClickthrough } from "@spotdraft/clickwrap-client-sdk";

// Initialize the SDK
const clickthrough = new SdClickthrough({
  clickwrapId: "your-clickwrap-id",
  baseUrl: "https://api.spotdraft.com",
  hostLocationDomId: "clickwrap-container"
});

// Initialize and render the clickwrap
await clickthrough.init();

// Listen for acceptance changes
clickthrough.on("ACCEPTANCE_TOGGLED", isAccepted => {
  console.log("Acceptance status:", isAccepted);
});

// Submit when user accepts
if (clickthrough.isAccepted()) {
  await clickthrough.submit({
    user_identifier: "[email protected]"
    // ... other metadata
  });
}

React Example

import React, { useEffect, useRef, useState } from "react";
import { SdClickthrough } from "@spotdraft/clickwrap-client-sdk";

const ClickwrapComponent: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [clickthrough, setClickthrough] = useState<SdClickthrough | null>(null);
  const [isAccepted, setIsAccepted] = useState(false);

  useEffect(() => {
    const sdk = new SdClickthrough({
      clickwrapId: "your-clickwrap-id",
      baseUrl: "https://api.spotdraft.com",
      hostLocationDomId: "clickwrap-container"
    });

    sdk.on("ACCEPTANCE_TOGGLED", setIsAccepted);
    sdk.init();
    setClickthrough(sdk);

    return () => {
      // Cleanup if needed
    };
  }, []);

  const handleSubmit = async () => {
    if (clickthrough && isAccepted) {
      await clickthrough.submit({
        user_identifier: "[email protected]"
      });
    }
  };

  return (
    <div>
      <div id="clickwrap-container" ref={containerRef} />
      <button onClick={handleSubmit} disabled={!isAccepted}>
        Submit
      </button>
    </div>
  );
};

Vue Example

<template>
  <div>
    <div id="clickwrap-container" ref="container"></div>
    <button @click="handleSubmit" :disabled="!isAccepted">Submit</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { SdClickthrough } from "@spotdraft/clickwrap-client-sdk";

const container = ref<HTMLElement>();
const isAccepted = ref(false);
let clickthrough: SdClickthrough | null = null;

onMounted(async () => {
  clickthrough = new SdClickthrough({
    clickwrapId: "your-clickwrap-id",
    baseUrl: "https://api.spotdraft.com",
    hostLocationDomId: "clickwrap-container"
  });

  clickthrough.on("ACCEPTANCE_TOGGLED", accepted => {
    isAccepted.value = accepted;
  });

  await clickthrough.init();
});

const handleSubmit = async () => {
  if (clickthrough && isAccepted.value) {
    await clickthrough.submit({
      user_identifier: "[email protected]"
    });
  }
};
</script>

API Reference

Constructor

new SdClickthrough(context: SdClickthroughContext)

SdClickthroughContext

• clickwrapId: string - Your clickwrap ID
• baseUrl: string - API base URL
• hostLocationDomId: string - DOM element ID where clickwrap will be rendered

Methods

init(): Promise<void>

Initializes and renders the clickwrap in the specified DOM element.

isAccepted(): boolean

Returns whether all required agreements have been accepted.

submit(payload: SdClickwrapSubmitPayload): Promise<unknown>

Submits the clickwrap acceptance.

on(event: SdClickthroughEvents, callback: Function): void

Registers an event listener.

isReacceptanceRequired(userIdentifier: string): Promise<unknown>

Checks if reacceptance is required for a user.

Events

• ACCEPTANCE_TOGGLED: Fired when acceptance status changes

CDN Usage (Browser)

If you prefer to use the SDK via CDN without npm:

<script src="https://cdn.spotdraft.com/clickwrap-sdk/bootstrap/sdk.js"></script>
<script>
  const clickthrough = new window.SdClickthrough({
    clickwrapId: "your-clickwrap-id",
    baseUrl: "https://api.spotdraft.com",
    hostLocationDomId: "clickwrap-container"
  });

  clickthrough.init();
</script>

TypeScript Support

This package includes full TypeScript definitions. All types are exported:

import { SdClickthrough, SdClickthroughContext, SdClickthroughEvents, SdClickwrapSubmitPayload } from "@spotdraft/clickwrap-client-sdk";

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Support

For support, please contact [email protected] or visit our documentation.