> ## Documentation Index
> Fetch the complete documentation index at: https://funnelfox.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# initMethod(method, element, options)

> Render a single payment method into your own element to build a custom checkout layout

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](/docs/develop/checkout-customization.md#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.

> [!NOTE]
>
> `initMethod()` is available only on the `Billing` object, so call it as
> `Billing.initMethod()`. It doesn't read [configure()](/docs/develop/configure.md):
> pass `orgId` in its options.

> [!TIP]
>
> Call [getAvailablePaymentMethods()](/docs/develop/get-available-payment-methods.md)
> first to decide which payment methods to render.

## Parameters

**method** `PaymentMethod` *required*

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

**element** `HTMLElement` *required*

The DOM element to render the payment method into.

**options** `InitMethodOptions` *required*

Checkout details, display options, and callbacks.

**options properties**

**orgId** `string` *required*

Your organization ID.

**priceId** `string` *required*

The price point identifier.

**externalId** `string` *required*

Your identifier for the customer.

**email** `string`

The customer's email address.

**baseUrl** `string` (default: [https://billing.funnelfox.com](https://billing.funnelfox.com))

Custom API base URL.

**meta** `object`

Custom metadata attached to the order.

**card** `object`

Card form fields. Learn more about the
[card form](/docs/develop/checkout-customization.md#card-form).

**style** `object`

Styles for the card number, expiry, and CVV inputs. Learn more about
[card input styles](/docs/develop/checkout-customization.md#card-input).

**applePay** `object`

Apple Pay button options, including `buttonType` and `buttonStyle`. Learn
more about [payment buttons](/docs/develop/checkout-customization.md#payment-button).

**googlePay** `object`

Google Pay button options.

**paypal** `object`

PayPal button options.

### Callbacks

All callbacks are optional and go in `options`.

**onRenderSuccess** `() =\> void`

Called when the payment method finishes rendering.

**onRenderError** `(method: PaymentMethod) =\> void`

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

**onPaymentStarted** `(method: PaymentMethod) =\> void`

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

**onLoaderChange** `(isLoading: boolean) =\> void`

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

**onPaymentSuccess** `() =\> void`

Called when the payment completes.

**onPaymentFail** `(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](/docs/develop/error-handling.md#decline-codes).

**onPaymentCancel** `() =\> void`

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

**onTaxChange** `(info: TaxInfo) =\> void`

Called with the total and tax when
[FunnelFox Payments Taxes](/docs/develop/web-sdk-taxes.md) is on.

**onTaxPending** `() =\> void`

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

**onTaxError** `(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

```html theme={null}
<div id="card-form"></div>
<button id="pay-button">Pay</button>
<div id="apple-pay"></div>
<p id="payment-error"></p>
```

```javascript theme={null}
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
}
```

> [!NOTE]
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.