Code examples & tutorials

Use these complete examples as a starting point for your integration. Each one covers a different way to build a checkout with the FunnelFox Payments Web SDK.

Find more complete examples in the GitHub repository.

Drop-in checkout

This example lets users pick between two price points (monthly or yearly) and starts a checkout with createCheckout(). The implementation includes:

Configuring SDK: Set up the SDK once with your orgId using Billing.configure.
Creating checkout: Initialize a new checkout with Billing.createCheckout using a priceId and customer details (external ID and email).
Switching prices: Update the open checkout with updatePrice() instead of creating a new one.
Event handling: Listen for success (redirect to confirmation page), error (display error message to user), and status changes (track checkout progress).

<!DOCTYPE html>
<html>
  <head>
    <title>Funnelfox Checkout</title>
    <script src="https://unpkg.com/@funnelfox/billing@0.11.0/dist/funnelfox-billing.min.js"></script>
  </head>
  <body>
    <div id="price-selector">
      <button onclick="selectPrice('price_monthly')">Monthly - $9.99</button>
      <button onclick="selectPrice('price_yearly')">Yearly - $99.99</button>
    </div>

    <div id="checkout-container" style="position: relative; min-height: 200px;"></div>

    <script>
      let currentCheckout = null;

      // Configure SDK once
      Billing.configure({
        orgId: 'your-org-id',
      });

      async function selectPrice(priceId) {
        try {
          if (currentCheckout && currentCheckout.isReady()) {
            // Update existing checkout
            await currentCheckout.updatePrice(priceId);
          } else {
            // Destroy old checkout if exists
            if (currentCheckout) {
              await currentCheckout.destroy();
            }

            // Create new checkout
            currentCheckout = await Billing.createCheckout({
              priceId: priceId,
              customer: {
                externalId: generateUserId(),
                email: getUserEmail(),
              },
              container: '#checkout-container',
            });

            // Handle success
            currentCheckout.on('success', result => {
              window.location.href = '/success?order=' + result.orderId;
            });

            // Handle errors. The checkout shows payment declines itself;
            // error is undefined when a new payment attempt starts.
            currentCheckout.on('error', error => {
              if (error) {
                alert('Something went wrong: ' + error.message);
              }
            });

            // Track state changes
            currentCheckout.on('status-change', state => {
              console.log('Checkout state:', state);
            });
          }
        } catch (error) {
          console.error('Checkout error:', error);
          alert('Failed to initialize checkout');
        }
      }

      function generateUserId() {
        return 'user_' + Math.random().toString(36).substr(2, 9);
      }

      function getUserEmail() {
        return 'user@example.com'; // Get from your auth system
      }
    </script>
  </body>
</html>

Individual payment methods

This example checks which payment methods are available and renders each one into its own element with Billing.initMethod(). Your own button submits the card form.

<div id="card-form"></div>
<button id="pay-button">Pay</button>
<div id="paypal"></div>
<div id="google-pay"></div>
<div id="apple-pay"></div>
<p id="payment-error"></p>

import {
  Billing,
  PaymentMethod,
  getAvailablePaymentMethods,
} from '@funnelfox/billing';

const errorEl = document.getElementById('payment-error');
const payButton = document.getElementById('pay-button');

const options = {
  orgId: 'your-org-id',
  priceId: 'price_123',
  externalId: 'user_456',
  email: 'user@example.com',
  onPaymentStarted: () => {
    errorEl.textContent = '';
  },
  onPaymentSuccess: () => {
    window.location.href = '/success';
  },
  onPaymentFail: error => {
    errorEl.textContent = error.message;
  },
};

const buttonElements = {
  [PaymentMethod.PAYPAL]: 'paypal',
  [PaymentMethod.GOOGLE_PAY]: 'google-pay',
  [PaymentMethod.APPLE_PAY]: 'apple-pay',
};

const methods = await getAvailablePaymentMethods({
  orgId: options.orgId,
  baseUrl: 'https://billing.funnelfox.com',
});

for (const method of methods) {
  if (method === PaymentMethod.PAYMENT_CARD) {
    const card = await Billing.initMethod(
      method,
      document.getElementById('card-form'),
      {
        ...options,
        onLoaderChange: isLoading => {
          payButton.disabled = isLoading;
        },
      }
    );
    payButton.addEventListener('click', () => card.submit());
  } else {
    await Billing.initMethod(
      method,
      document.getElementById(buttonElements[method]),
      options
    );
  }
}

The calls use the same price point and customer, so every payment method pays for the same order.

Stripe wallet and card form

This example uses the Billing.stripe methods. It shows a wallet button when Apple Pay or Google Pay is available and always shows a card form as a fallback.

<button id="wallet-button" hidden></button>
<div id="card-form"></div>
<button id="pay-button" disabled>Pay</button>
<p id="payment-error"></p>

import { Billing } from '@funnelfox/billing';

Billing.configure({ orgId: 'your-org-id' });

const params = {
  priceId: 'price_123',
  externalId: 'user_456',
  email: 'user@example.com',
};

const errorEl = document.getElementById('payment-error');
const payButton = document.getElementById('pay-button');

function onPaymentSuccess(paymentMethod, orderId) {
  window.location.href = '/success?order=' + orderId;
}

// 1. Check for a wallet while the page renders
const wallet = await Billing.stripe.getAvailableWallet(params);

if (wallet) {
  const walletButton = document.getElementById('wallet-button');
  walletButton.textContent =
    wallet === 'APPLE_PAY' ? 'Pay with Apple Pay' : 'Pay with Google Pay';
  walletButton.hidden = false;

  walletButton.addEventListener('click', () => {
    Billing.stripe
      .purchaseWallet({
        ...params,
        totalLabel: 'Premium plan',
        onPaymentSuccess,
        onPaymentCancel: () => console.log('Payment sheet closed'),
      })
      .catch(error => {
        errorEl.textContent = error.message;
      });
  });
}

// 2. Always mount the card form as a fallback
const cardForm = await Billing.stripe.createCardForm(
  document.getElementById('card-form'),
  {
    ...params,
    onRenderSuccess: () => {
      payButton.disabled = false;
    },
    onLoaderChange: isLoading => {
      payButton.disabled = isLoading;
    },
    onPaymentSuccess,
  }
);

payButton.addEventListener('click', async () => {
  errorEl.textContent = '';
  try {
    await cardForm.submit();
  } catch (error) {
    errorEl.textContent = error.message;
  }
});

API reference

Webhook reference

Billing Web SDK

Code examples & tutorials

Drop-in checkout

Individual payment methods

Stripe wallet and card form

​Drop-in checkout

​Individual payment methods

​Stripe wallet and card form

Drop-in checkout

Individual payment methods

Stripe wallet and card form