initMethod(method, element, options)

Renders one payment method into an element you choose. Call it once per payment method to place the card form and each payment button anywhere in your own layout. For PAYMENT_CARD, the SDK renders the card form without a pay button: add your own button and call submit(). For PAYPAL, GOOGLE_PAY, and APPLE_PAY, it renders the payment button at the element’s full width.

initMethod() is available only on the Billing object, so call it as Billing.initMethod(). It doesn’t read configure(): pass orgId in its options.

Call getAvailablePaymentMethods() first to decide which payment methods to render.

Parameters

PaymentMethod

required

The payment method to render: PAYMENT_CARD, PAYPAL, GOOGLE_PAY, or APPLE_PAY. Use the PaymentMethod enum or the string value.

HTMLElement

required

The DOM element to render the payment method into.

InitMethodOptions

required

Checkout details, display options, and callbacks.

Show options properties

string

required

Your organization ID.

string

required

The price point identifier.

string

required

Your identifier for the customer.

string

The customer’s email address.

string

default:"https://billing.funnelfox.com"

Custom API base URL.

object

Custom metadata attached to the order.

object

Card form fields. Learn more about the card form.

object

Styles for the card number, expiry, and CVV inputs. Learn more about card input styles.

object

Apple Pay button options, including buttonType and buttonStyle. Learn more about payment buttons.

object

Google Pay button options.

object

PayPal button options.

Callbacks

All callbacks are optional and go in options.

() => void

Called when the payment method finishes rendering.

(method: PaymentMethod) => void

Called when the payment method can’t render, for example when Apple Pay isn’t available in the browser.

(method: PaymentMethod) => void

Called when the buyer starts a payment. Clear any error message you show here.

(isLoading: boolean) => void

Called with true while a payment is processing and false when it ends.

() => void

Called when the payment completes.

(error: PaymentFailure) => void

Called when the payment fails. The error carries declineCode and declineCodeSource when the payment provider reports a decline. Learn more about decline codes.

() => void

Called when the buyer exits the payment method’s flow before paying.

(info: TaxInfo) => void

Called with the total and tax when FunnelFox Payments Taxes is on.

() => void

Called when the buyer changes their country or zip code and a tax recalculation starts.

(error: Error) => void

Called when a tax recalculation fails.

Returns

A Promise<PaymentMethodInterface> with these methods:

setDisabled(disabled): Turn the payment method off or on.
submit(): Validate the card form and start the payment. Card payments only.
destroy(): Remove the payment method and end its checkout session.

If the payment method can’t render, the promise rejects with a PrimerError.

Example

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

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

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

const card = await Billing.initMethod(
  PaymentMethod.PAYMENT_CARD,
  document.getElementById('card-form'),
  {
    ...options,
    onLoaderChange: isLoading => {
      document.getElementById('pay-button').disabled = isLoading;
    },
  }
);

document.getElementById('pay-button').addEventListener('click', () => {
  card.submit();
});

try {
  await Billing.initMethod(
    PaymentMethod.APPLE_PAY,
    document.getElementById('apple-pay'),
    { ...options, applePay: { buttonType: 'subscribe' } }
  );
} catch (error) {
  // Apple Pay isn't available in this browser
}

Calls with the same orgId, priceId, externalId, and email share one order, so the card form and the payment buttons above pay for the same purchase.

API reference

Webhook reference

Billing Web SDK

initMethod(method, element, options)

Parameters

Callbacks

Returns

Example

​Parameters

​Callbacks

​Returns

​Example

Parameters

Callbacks

Returns

Example