React integration

React Integration

Follow these steps to integrate the Staysignal widget into your React application:

1. Create a Widget Component

This component loads the widget script using your Site ID (from the URL) and handles initialization.

import { useEffect } from 'react';

interface StaySignalWidgetProps {
  onComplete?: (payload: any) => void;
  onError?: (error: any) => void;
}

declare global {
  interface Window { StaySignal: any; }
}

export function StaySignalWidget({ onComplete, onError }: StaySignalWidgetProps) {

  useEffect(() => {
    const scriptId = 'staysignal-widget-script';
    if (document.getElementById(scriptId)) return;

    const script = document.createElement('script');
    script.id = scriptId;
    script.src = '/api/widget/script/YOUR_SITE_ID_HERE'; // Use the new script URL
    script.async = true;

    script.onload = () => {
      if (!window.StaySignal) {
        console.error("StaySignal object not found after script load.");
        onError?.(new Error("StaySignal failed to initialize."));
        return;
      }
      window.StaySignal.init({
        // site_id is included in the script URL
        onComplete: (payload: any) => { onComplete?.(payload); },
        onError: (error: any) => { onError?.(error); }
      });
      window.StaySignal.onReady(() => { /* Widget Core Ready */ });
    };

    script.onerror = () => { onError?.(new Error("Failed to load StaySignal script.")); };

    document.body.appendChild(script);

    return () => {
      const existingScript = document.getElementById(scriptId);
      if (existingScript) {
        document.body.removeChild(existingScript);
      }
    };
  }, [onComplete, onError]); // Adjust dependencies

  return null; // Component doesn't render anything itself
}

2. Create a Cancel Button Component

// components/CancelButton.tsx
import { useEffect, useRef } from 'react';

interface CancelButtonProps {
  subscriptionId: string;
  className?: string;
  children?: React.ReactNode;
}

export function CancelButton({ subscriptionId, className = '', children }: CancelButtonProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (!button) return;

    // Add required attributes
    button.classList.add('staysignal-cancel');
    button.setAttribute('data-subscription_id', subscriptionId);

    return () => {
      button.classList.remove('staysignal-cancel');
      button.removeAttribute('data-subscription_id');
    };
  }, [subscriptionId]);

  return (
    <button ref={buttonRef} className={className}>
      {children || 'Cancel Subscription'}
    </button>
  );
}

3. Use the Components

Learn how to retrieve the correct subscription ID

Error Handling

It's recommended to implement proper error handling:

<script>
// Global error handler for widget loading issues
window.onerror = function(msg, url, line, col, error) {
    console.error('Widget error:', { msg, url, line, col, error });
    return false;
};

// Widget-specific error handling
StaySignal.init({
    // site_id is no longer needed here, it's included in the script URL
    onError: (error) => {
        console.error('Widget error:', error);
        // Handle the error appropriately
    }
});
</script>

Testing

To test your integration:

1. Ensure the widget script loads successfully

2. Check browser console for any errors

3. Test both class-based and JavaScript-based cancel buttons

4. Verify the onComplete callback is triggered

5. Test error scenarios by providing invalid subscription IDs

Finding Stripe Subscription IDs

Staysignal requires a subscription_id to identify which subscription a user is trying to cancel. Here are ways to find and use a user's Stripe subscription ID:

From Your Database

Most applications store subscription IDs in their database after a successful Stripe subscription creation. This is the recommended approach for performance and reliability.

Javascript/Node.js

<script>
// Example using Node.js with Express and MongoDB
app.get('/account', async (req, res) => {
  try {
    // Get user ID from session/JWT
    const userId = req.user.id;
    
    // Fetch subscription from your database
    const user = await User.findById(userId).populate('subscription');
    const subscriptionId = user.subscription?.stripeSubscriptionId;
    
    res.render('account', { 
      user, 
      subscriptionId  // Pass to your view
    });
  } catch (error) {
    console.error('Error fetching subscription:', error);
    res.status(500).send('Server error');
  }
});
</script>

PHP

<?php
// Example using PHP with Laravel
public function showAccount()
{
    $user = Auth::user();
    $subscription = $user->subscription; // Assuming relationship is set up
    $subscriptionId = $subscription ? $subscription->stripe_subscription_id : null;
    
    return view('account', [
        'user' => $user,
        'subscriptionId' => $subscriptionId
    ]);
}

Ruby

# Example using Ruby on Rails
class AccountController < ApplicationController
  def show
    @user = current_user
    @subscription = @user.subscription
    @subscription_id = @subscription&.stripe_subscription_id
  end
end

# In your view: account.html.erb
<button class="staysignal-cancel" data-subscription_id="<%= @subscription_id %>">
  Cancel Subscription
</button>

Python

# Example using Django
def account_view(request):
    user = request.user
    subscription = Subscription.objects.filter(user=user).first()
    subscription_id = subscription.stripe_subscription_id if subscription else None
    
    return render(request, 'account.html', {
        'user': user,
        'subscription_id': subscription_id
    })

Fetching from Stripe API

If you need to fetch the subscription ID directly from Stripe (not recommended for production):

Node.js

<script>
// Using Stripe Node.js SDK
const stripe = require('stripe')('sk_test_your_stripe_secret_key');

async function getCustomerSubscriptions(customerId) {
  try {
    const subscriptions = await stripe.subscriptions.list({
      customer: customerId,
      status: 'active',
      limit: 1
    });
    
    if (subscriptions.data.length > 0) {
      return subscriptions.data[0].id; // Returns the subscription ID
    }
    return null;
  } catch (error) {
    console.error('Error fetching from Stripe:', error);
    throw error;
  }
}
</script>

PHP

<?php
// Using Stripe PHP SDK
require_once 'vendor/autoload.php';
StripeStripe::setApiKey('sk_test_your_stripe_secret_key');

function getCustomerSubscriptions($customerId) {
    try {
        $subscriptions = StripeSubscription::all([
            'customer' => $customerId,
            'status' => 'active',
            'limit' => 1
        ]);
        
        if (count($subscriptions->data) > 0) {
            return $subscriptions->data[0]->id;
        }
        return null;
    } catch (Exception $e) {
        error_log('Stripe API Error: ' . $e->getMessage());
        return null;
    }
}

Ruby

# Using Stripe Ruby SDK
require 'stripe'
Stripe.api_key = 'sk_test_your_stripe_secret_key'

def get_customer_subscriptions(customer_id)
  begin
    subscriptions = Stripe::Subscription.list(
      customer: customer_id,
      status: 'active',
      limit: 1
    )
    
    return subscriptions.data.first&.id
  rescue Stripe::StripeError => e
    Rails.logger.error("Stripe API Error: #{e.message}")
    return nil
  end
end

Python

# Using Stripe Python SDK
import stripe
stripe.api_key = "sk_test_your_stripe_secret_key"

def get_customer_subscriptions(customer_id):
    try:
        subscriptions = stripe.Subscription.list(
            customer=customer_id,
            status='active',
            limit=1
        )
        
        if subscriptions.data:
            return subscriptions.data[0].id
        return None
    except stripe.error.StripeError as e:
        print(f"Stripe API Error: {e}")
        return None

Security Considerations

Always follow these security best practices:

• Never expose your Stripe secret key in client-side code

• Implement proper authentication before showing/using subscription IDs

• If using the Stripe API directly, cache the results to minimize API calls

• Consider using Stripe Webhooks to keep your database in sync with Stripe

Need Help?

If you encounter any issues with the integration, please contact our support team.