Sir Chargly - User Onboarding Guide

Welcome to Sir Chargly! This guide will walk you through the complete onboarding process to get you up and running with convenience fee processing.

Overview

The onboarding wizard takes approximately 5 minutes and consists of 6 steps:

Step 1: Welcome

When you first sign up, you'll see the welcome screen that explains:

What to do: Click "Let's Get Started →" to begin

Step 2: Connect Your Stripe Account

Why This Is Needed

Sir Chargly needs access to your Stripe account to:

What We Access

Security

Steps

Already Connected? If your Stripe account is already linked, you'll see a confirmation and can skip to the next step.

Step 3: Analyze Your Earnings

This is the exciting part! Based on your last 30 days of transaction data, we'll show you:

Big Picture Number

A large, animated number showing your additional monthly revenue potential by adding convenience fees with Sir Chargly.

Example: +$1,247

Comparison View

Two side-by-side cards showing:

Visual Chart

An animated bar chart comparing:

Transaction Stats

What If I Don't Have Transaction Data?

If you don't have any transactions in the last 30 days, you'll see a message and can continue with default fee configurations.

What to do: Review your potential earnings and click "Configure My Fees →"

Step 4: Configure Your Convenience Fees

This step lets you set up your fee structure with real-time revenue projections.

Interactive Sliders

Percentage Fee (0% - 5%)

Flat Fee ($0 - $2)

Live Revenue Projection

As you adjust the sliders, you'll see a large animated number showing your projected monthly revenue based on your 30-day transaction history.

Example Calculation

A breakdown showing how fees apply to a $100 transaction:

Best Practices

What to do: Adjust the sliders to your desired fee structure and click "Save & Continue →"

Step 5: Generate Your First API Key

Security is critical! This step creates your first API key for integration.

What You'll Get

Publishable Key (starts with pk_dev_)

Secret Key (starts with sk_dev_)

Development Environment

Your first key is automatically created for the development environment:

Security Warning

⚠️ CRITICAL: This is the only time you'll see the secret key!

How to Copy Keys

```bash

SIRCHARGLEY_PUBLISHABLE_KEY=pk_dev_sirchargly_...

SIRCHARGLEY_SECRET_KEY=sk_dev_sirchargly_...

```

What to do: Copy both keys to a secure location and click "I've Saved My Keys →"

Step 6: Get Started - Integration Guide

The final step provides everything you need to integrate Sir Chargly.

Quick Reference

Your API keys are shown again for quick reference:

Installation

npm install @sirchargly/sdk

Client-Side Integration

Initialize Sir Chargly in your frontend:

import { SirChargly } from '@sirchargly/sdk';

// Initialize with your publishable key
const chargly = new SirChargly('pk_dev_sirchargly_...');

// Create a payment with convenience fee
async function createPayment(amount: number) {
  const payment = await chargly.payments.create({
    amount: amount,
    currency: 'usd',
    customer: customerId,
  });

  // Sir Chargly automatically calculates and adds the fee
  console.log('Total with fee:', payment.totalAmount);
  console.log('Convenience fee:', payment.convenienceFee);

  return payment;
}

Server-Side Integration

Process payments on your backend:

import Stripe from 'stripe';

// Initialize Stripe with your secret key
const stripe = new Stripe('sk_dev_sirchargly_...', {
  apiVersion: '2025-12-15.clover',
});

// Process the payment
async function processPayment(paymentIntentId: string) {
  const paymentIntent = await stripe.paymentIntents.retrieve(
    paymentIntentId
  );

  // Sir Chargly handles fee calculation and compliance
  return paymentIntent;
}

Webhook Setup (Optional)

Handle payment events:

import { NextRequest, NextResponse } from 'next/server';
import { headers } from 'next/headers';

export async function POST(req: NextRequest) {
  const body = await req.text();
  const signature = headers().get('stripe-signature');

  // Verify webhook signature
  const event = stripe.webhooks.constructEvent(
    body,
    signature!,
    process.env.STRIPE_WEBHOOK_SECRET!
  );

  // Handle payment events
  if (event.type === 'payment_intent.succeeded') {
    const paymentIntent = event.data.object;
    console.log('Payment succeeded:', paymentIntent.id);
  }

  return NextResponse.json({ received: true });
}

Next Steps

Go to Dashboard

Read the Docs

What to do: Click "Complete Setup & Go to Dashboard →" to finish onboarding

After Onboarding

Dashboard Overview

Your dashboard provides:

Creating Production Keys

When you're ready to go live:

Going Live Checklist

Support

Need help?

Troubleshooting

Stripe Connection Failed

Problem: Error connecting to Stripe during onboarding

Solutions:

No Transaction Data

Problem: Earnings analysis shows "No Transaction Data"

Solutions:

Lost API Keys

Problem: Forgot to copy secret key during onboarding

Solutions:

Fee Configuration Questions

Problem: Unsure what fee percentage to set

Recommendations:

Environment Toggle Confusion

Problem: Seeing test data in dashboard

Solutions:

Tips for Success

Best Practices

- Test all features before going live

- Use development keys for integration

- Verify webhook handling works correctly

- Display fees clearly at checkout

- Explain that fees help offset processing costs

- Offer fee-free alternatives if possible (ACH, etc.)

- Track conversion rates after adding fees

- Watch for cart abandonment spikes

- Adjust fees if needed based on data

- Review regional compliance requirements

- Keep fees reasonable (typically 2-4%)

- Disclose fees before payment

- Never charge more than actual processing costs

Common Mistakes to Avoid

❌ Exposing secret keys in client-side code

❌ Committing API keys to GitHub/version control

❌ Setting fees too high (>4% often hurts conversion)

❌ Not testing thoroughly before going live

❌ Forgetting to update production environment variables

❌ Using production keys in development

Summary

Congratulations on completing onboarding! You now have:

✅ Stripe account connected

✅ Earning potential analyzed

✅ Convenience fees configured

✅ API keys generated

✅ Integration guide available

Next: Start integrating the SDK into your application and test in development mode. When ready, create production keys and go live!

Welcome to Sir Chargly - let's maximize your revenue together! 🚀