Standalone Payment Widget

Zero Dependencies

A self-contained, embeddable payment solution that transforms any webpage into a secure payment processor with just a few lines of code. Perfect for developers who need flexible payment integration.

🚀 Build Your Payment Solution in Minutes

The Standalone Payment Widget is designed for developers who want to quickly add payment functionality without complex integrations. Just copy, paste, and customize.

No backend required

Works on any HTML page

Stripe Connect powered

Mobile-responsive

PCI compliant

Instant Setup

Copy & paste HTML to start accepting payments

Secure by Default

PCI-compliant Stripe processing built-in

Self-Contained

No dependencies or complex integrations

Works Anywhere

Static sites, CMSs, or custom apps

⚡ Quick Start - Copy & Paste

Get started in 30 seconds with this ready-to-use code:

<!DOCTYPE html>
<html>
<head>
  <title>Payment Page</title>
</head>
<body>
  <h1>Make a Payment</h1>
  
  <!-- Standalone Payment Widget -->
  <div id="payment-widget"
    data-widget="payment"
    data-tenant="YOUR_TENANT_ID"
    data-container="payment-widget"
    data-amount="99.00"
    data-service="Professional Service"
    data-reference="INV-2024-001">
  </div>
  
  <!-- Load the widget -->
  <script type="module" src="https://cdn.widgetfied.com/portal.js"></script>
</body>
</html>

Replace YOUR_TENANT_ID with your actual tenant ID. That's it - you're ready to accept payments!

🎮 Live Demo

Try the payment widget with dynamic data binding. Update the fields below and watch the widget update in real-time.

HTML

<!-- Payment Widget Container -->
<div id="payment-demo"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="payment-demo"
  data-reference="INV-001"
  data-amount="25.00"
  data-service="Test Service"
  data-customer-email="test@example.com"
  data-show-tip="false">
</div>

<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

JavaScript Events

// Update widget data dynamically
function updatePaymentWidget(field, value) {
  const widget = document.getElementById('payment-demo');
  widget.setAttribute(`data-${field}`, value);
}

// Listen for payment events
window.addEventListener('DOMContentLoaded', () => {
  if (window.paymentWidget) {
    paymentWidget.on('payment:success', (data) => {
      console.log('✅ Payment successful:', data);
    });
    
    paymentWidget.on('payment:error', (data) => {
      console.log('❌ Payment failed:', data.message);
    });
  }
});

The widget dynamically responds to data attribute changes. Update data-amount, data-reference, or data-customer-email via JavaScript and the widget updates instantly.

💡 Perfect For

Invoice Payment Pages

Create simple payment links for outstanding invoices

yoursite.com/pay/invoice-123

Service Payment Portals

Accept payments for completed services with optional tipping

Lawn care, cleaning, repairs

Donation Forms

Quick donation pages for non-profits or fundraising

One-time or custom amounts

Event Registration

Collect payments for workshops, classes, or events

Registration with confirmation

Digital Product Sales

Simple checkout for digital downloads or services

E-books, courses, consultations

🛠️ Configuration Options

Customize the widget behavior with these HTML data attributes:

Attribute	Required	Type	Description	Example
`data-widget`	Required	string	Must be "payment" for payment widget	`"payment"`
`data-tenant`	Required	string	Your unique tenant/merchant ID	`"TENANT_ABC123"`
`data-container`	Required	string	ID of the container element	`"payment-widget"`
`data-amount`	Optional	number	Pre-set payment amount in dollars	`"150.00"`
`data-service`	Optional	string	Service or product description	`"Premium Package"`
`data-reference`	Optional	string	Invoice or reference number	`"INV-2024-001"`
`data-customer-name`	Optional	string	Pre-fill customer name	`"John Doe"`
`data-customer-email`	Optional	string	Pre-fill customer email	`"john@example.com"`
`data-customer-phone`	Optional	string	Pre-fill customer phone	`"555-0100"`
`data-success-url`	Optional	string	Redirect URL after successful payment	`"/thank-you"`
`data-cancel-url`	Optional	string	Redirect URL if payment cancelled	`"/cancelled"`

📋 Real-World Examples

Simple Invoice Payment

Basic payment page for a specific invoice amount

<!-- Invoice Payment Page -->
<div id="invoice-payment"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="invoice-payment"
  data-reference="INV-2024-001"
  data-amount="250.00"
  data-service="Web Design Services"
  data-customer-name="Jane Smith"
  data-customer-email="jane@company.com">
</div>
<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

Service Payment with Tipping

Perfect for service businesses that accept tips

<!-- Service Payment with Optional Tip -->
<div id="service-payment"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="service-payment"
  data-amount="75.00"
  data-service="House Cleaning Service"
  data-reference="JOB-2024-456">
</div>
<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

Donation Form

Let users choose their donation amount

<!-- Donation Widget (User Enters Amount) -->
<div id="donation-widget"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="donation-widget"
  data-service="One-Time Donation"
  data-success-url="/thank-you-donation">
</div>
<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

Event Registration

Collect payment for workshop or event registration

<!-- Event Registration Payment -->
<div id="event-payment"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="event-payment"
  data-amount="199.00"
  data-service="Digital Marketing Workshop - March 2024"
  data-reference="EVENT-MAR-2024"
  data-success-url="/registration-confirmed">
</div>
<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

🔧 Integration Patterns

Static HTML Sites

Add to any HTML page - perfect for GitHub Pages, Netlify, or simple hosting

<!-- Add to your HTML file -->
<div id="payment" data-widget="payment" data-tenant="YOUR_ID" data-container="payment"></div>
<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

WordPress

Use Custom HTML block or add to theme template

<!-- Add via Custom HTML Block in WordPress Editor -->
<div id="payment" data-widget="payment" data-tenant="YOUR_ID" data-container="payment"></div>
<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

React/Next.js

Add as a component or use useEffect for dynamic loading

// React Component
function PaymentWidget({ amount, reference }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.widgetfied.com/portal.js';
    script.type = 'module';
    document.body.appendChild(script);
  }, []);
  
  return (
    <div 
      id="payment"
      data-widget="payment"
      data-tenant="YOUR_ID"
      data-container="payment"
      data-amount={amount}
      data-reference={reference}
    />
  );
}

Dynamic with JavaScript

Generate payment widgets dynamically

// Create payment widget dynamically
function createPaymentWidget(amount, reference) {
  const container = document.createElement('div');
  container.id = 'dynamic-payment';
  container.setAttribute('data-widget', 'payment');
  container.setAttribute('data-tenant', 'YOUR_ID');
  container.setAttribute('data-container', 'dynamic-payment');
  container.setAttribute('data-amount', amount);
  container.setAttribute('data-reference', reference);
  
  document.getElementById('payment-area').appendChild(container);
  
  // Load script if not already loaded
  if (!document.querySelector('script[src*="portal.js"]')) {
    const script = document.createElement('script');
    script.src = 'https://cdn.widgetfied.com/portal.js';
    script.type = 'module';
    document.body.appendChild(script);
  }
}

💳 Payment Flow

Widget Loads

The widget initializes and checks Stripe Connect status

Customer Clicks Pay

Payment modal opens with pre-filled or editable details

Amount Confirmation

Customer reviews amount and can add optional tip

Secure Checkout

Stripe handles payment details securely (PCI compliant)

Processing

Payment processes directly to merchant's Stripe account

Confirmation

Success message shown and emails sent to both parties

🔒 Security & Compliance

PCI Compliance

All payment data is handled by Stripe's PCI-compliant infrastructure. Your servers never touch sensitive card data.

Stripe Connect

Each merchant has their own isolated Stripe account. Payments go directly to them with no intermediary.

HTTPS Required

The widget only works on secure HTTPS connections to protect customer data.

No Data Storage

The widget doesn't store any payment information. Everything is processed in real-time through Stripe.

✅ Requirements

Stripe Connect Setup- Complete Stripe onboarding in your dashboard

HTTPS Website- Your site must use SSL/TLS (https://)

Valid Tenant ID- Get your tenant ID from the dashboard

Modern Browser- Works in all modern browsers (Chrome, Firefox, Safari, Edge)

🧪 Testing Your Integration

1Use Stripe test mode (enabled by default in development)
2Test card number: 4242 4242 4242 4242
3Any future expiry date and any 3-digit CVC
4Test different amounts and scenarios
5Verify email confirmations are sent
6Check that payments appear in your Stripe dashboard

🔧 Troubleshooting

Widget not appearing

• Verify the container ID matches the data-container attribute
• Check browser console for JavaScript errors
• Ensure the script tag is loading correctly
• Confirm your tenant ID is valid

Payment button disabled

• Complete Stripe Connect onboarding in dashboard
• Verify your Stripe account is active
• Check that your subscription is active
• Ensure you're using HTTPS

Payments failing

• Check Stripe dashboard for detailed error messages
• Verify customer card details are correct
• Ensure amount is above minimum ($0.50 USD)
• Check for any Stripe account restrictions

Custom styling needed

• The widget adapts to your site's font family
• Use CSS to style the container div
• Contact support for advanced customization options

✨ Best Practices

Always pre-fill known data

If you have customer information, use data attributes to pre-fill fields for better UX

Use meaningful references

Include invoice numbers or job IDs in data-reference for easy tracking

Set specific amounts when possible

Pre-set amounts reduce friction and errors in the payment process

Test thoroughly

Always test the full payment flow before going live

Provide clear context

Add descriptive text around the widget explaining what the payment is for

❓ Frequently Asked Questions

Q: Do I need a backend server?

A: No! The widget is completely self-contained and handles everything through our secure API.

Q: What are the fees?

A: Standard Stripe fees apply (2.9% + $0.30). We don't charge any additional platform fees.

Q: Can I customize the appearance?

A: The widget adapts to your site's styling. Advanced customization is available through white-label settings.

Q: Is it mobile-friendly?

A: Yes! The widget is fully responsive and works great on all devices.

Q: Can I use it on multiple sites?

A: Yes, you can embed the widget on unlimited sites using the same tenant ID.

Q: How quickly do I receive payments?

A: Payments are deposited according to your Stripe payout schedule (typically 2-7 days).

Next Steps

Complete Stripe Connect Setup View All Widgets Embed Guide Get Support