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

# createPaymentMethodManager

```ts TS theme={"dark"}
createPaymentMethodManager(
  type: string
): Promise<
  | ICardPaymentMethodManager
  | INativePaymentMethodManager
  | IRedirectPaymentMethodManager
  | IKlarnaPaymentMethodManager
  | IAchPaymentMethodManager
  | null
>
```

There are five types of manager that can be returned by this function,
depending on the `type` provided as first argument:
[Card](#card), [Native](#native), [Redirect](#redirect), [Klarna Payment Method](#klarna) and [ACH](#ach).

In case the type specified is not supported, the function will return `null` instead.

## Card

```ts TS theme={"dark"}
createPaymentMethodManager(
	type: "PAYMENT_CARD",
	options?: PaymentMethodManagerOptions
): Promise<ICardPaymentMethodManager | null>
```

Create an instance of the `ICardPaymentMethodManager`, which can be used to manage credit card payments.

### Parameters

<Expandable defaultOpen title="Parameters">
  <ResponseField name="type" type="&#x22;PAYMENT_CARD&#x22;">
    When it matches this type, a manager for card payment methods will be
    returned.
  </ResponseField>

  <ResponseField name="options" type="object">
    Options to configure the payment method manager.

    <Expandable defaultOpen title="Properties">
      <ResponseField name="onCardMetadataChange" type="(metadata: CardMetadata) => void">
        Called when the card metadata changes. Takes a `CardMetadata` object as its argument.

        <Expandable title="CardMetadata">
          <ResponseField name="type" type="CardNetwork | null" deprecated>
            *Deprecated: Use [onCardNetworksChange](#param-on-card-networks-change) instead*

            Allowed card networks for credit card payments, one of
            [CardNetwork](/sdk/web/v2.x.x/constants/card-networks).
          </ResponseField>

          <ResponseField name="possibleTypes" type="CardNetwork[]" deprecated>
            *Deprecated: Use [onCardNetworksChange](#param-on-card-networks-change) instead*

            An array of [CardNetwork](/sdk/web/v2.x.x/constants/card-networks). Reduces to one or zero elements as more digits on the card number are input.
          </ResponseField>

          <ResponseField name="cvvLength" type="number">
            Usually 3 digits, but can sometimes be 4.
          </ResponseField>

          <ResponseField name="cardNumberLength" type="number">
            Represents the length of the card number for the given card type.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onBinDataAvailable" type="(event: BinDataAvailableEvent) => void">
        Called when Headless Checkout detects BIN data from the card number entered by the user. This callback provides detailed information about the card including issuer details and card attributes.

        Makes available an `event` of type `BinDataAvailableEvent`.

        <Expandable defaultOpen title="BinDataAvailableEvent">
          <ResponseField name="preferred" type="BinDataDetails | undefined">
            The recommended card network to use, based on the order specified in `orderedAllowedCardNetworks`.

            If no network is allowed, `undefined`.

            <Expandable title="BinDataDetails">
              <ResponseField name="displayName" type="string" required>
                A human readable name for the card network.
              </ResponseField>

              <ResponseField name="network" type="string" required>
                A value that represents the card network in Primer's systems.
              </ResponseField>

              <ResponseField name="allowed" type="boolean" required>
                Whether or not the card network is allowed, according to `orderedAllowedCardNetworks` passed in the Client Session.
              </ResponseField>

              <ResponseField name="issuerCountryCode" type="string">
                The ISO 3166-1 alpha-2 country code of the card issuer.
              </ResponseField>

              <ResponseField name="issuerName" type="string">
                The name of the card issuer (e.g., bank name).
              </ResponseField>

              <ResponseField name="accountFundingType" type="string">
                The type of account funding (e.g., "CREDIT", "DEBIT", "PREPAID").
              </ResponseField>

              <ResponseField name="prepaidReloadableIndicator" type="string">
                Indicates whether a prepaid card is reloadable.
              </ResponseField>

              <ResponseField name="productUsageType" type="string">
                The usage type of the card product (e.g., "CONSUMER", "COMMERCIAL").
              </ResponseField>

              <ResponseField name="productCode" type="string">
                The product code assigned by the card network.
              </ResponseField>

              <ResponseField name="productName" type="string">
                The product name assigned by the card network (e.g., "Visa Signature").
              </ResponseField>

              <ResponseField name="issuerCurrencyCode" type="string">
                The ISO 4217 currency code associated with the card issuer.
              </ResponseField>

              <ResponseField name="regionalRestriction" type="string">
                Regional restrictions that apply to the card.
              </ResponseField>

              <ResponseField name="accountNumberType" type="string">
                The type of account number (e.g., "PAN", "TOKEN").
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="alternatives" type="BinDataDetails[]">
            All the detected card networks, including the ones that are not allowed. For co-badged cards, this array contains multiple networks.

            To get the list of selectable networks for co-badged cards, use:

            `[preferred, ...alternatives].filter(n => n.allowed)`

            <Expandable title="BinDataDetails">
              <ResponseField name="displayName" type="string" required>
                A human readable name for the card network.
              </ResponseField>

              <ResponseField name="network" type="string" required>
                A value that represents the card network in Primer's systems.
              </ResponseField>

              <ResponseField name="allowed" type="boolean" required>
                Whether or not the card network is allowed, according to `orderedAllowedCardNetworks` passed in the Client Session.
              </ResponseField>

              <ResponseField name="issuerCountryCode" type="string">
                The ISO 3166-1 alpha-2 country code of the card issuer.
              </ResponseField>

              <ResponseField name="issuerName" type="string">
                The name of the card issuer (e.g., bank name).
              </ResponseField>

              <ResponseField name="accountFundingType" type="string">
                The type of account funding (e.g., "CREDIT", "DEBIT", "PREPAID").
              </ResponseField>

              <ResponseField name="prepaidReloadableIndicator" type="string">
                Indicates whether a prepaid card is reloadable.
              </ResponseField>

              <ResponseField name="productUsageType" type="string">
                The usage type of the card product (e.g., "CONSUMER", "COMMERCIAL").
              </ResponseField>

              <ResponseField name="productCode" type="string">
                The product code assigned by the card network.
              </ResponseField>

              <ResponseField name="productName" type="string">
                The product name assigned by the card network (e.g., "Visa Signature").
              </ResponseField>

              <ResponseField name="issuerCurrencyCode" type="string">
                The ISO 4217 currency code associated with the card issuer.
              </ResponseField>

              <ResponseField name="regionalRestriction" type="string">
                Regional restrictions that apply to the card.
              </ResponseField>

              <ResponseField name="accountNumberType" type="string">
                The type of account number (e.g., "PAN", "TOKEN").
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="status" type="'complete' | 'partial'">
            The status of the BIN data retrieval.

            <Expandable title="Values">
              <ResponseField name="complete">
                This happens when 8 digits or more are entered in the card number field.

                Headless Checkout retrieved the BIN data using Primer's BIN data service. This provides the most accurate information including issuer details.
              </ResponseField>

              <ResponseField name="partial">
                This happens when less than 8 digits are entered in the card number field, or when Headless Checkout fails to contact Primer's BIN data service.

                Headless Checkout retrieved the card networks using static information bundled with the SDK. This information can only identify international card networks and does not include issuer details.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="firstDigits" type="string | undefined">
            The first digits (BIN prefix) of the card number, when available.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onBinDataLoadingChange" type="(loading: boolean) => void">
        Called when BIN data is being fetched from Primer's servers. Use this to show a loading indicator while card network and issuer information is being retrieved.

        Makes available a `loading` parameter of type `boolean`.

        * `true` when BIN data retrieval starts
        * `false` when BIN data retrieval completes (followed by an `onBinDataAvailable` callback)
      </ResponseField>

      <ResponseField name="onCardNetworksChange" type="(event: CardNetworkChangeEvent) => void" deprecated="Use onBinDataAvailable instead for richer BIN data including issuer information.">
        <Warning>
          **Deprecated:** This callback is deprecated. Use [`onBinDataAvailable`](#card.parameters.options-properties.onBinDataAvailable) instead, which provides richer BIN data including issuer information and card attributes.
        </Warning>

        Called when Headless Checkout detects new card networks from the card number entered by the user.

        Makes available an `event` of type `CardNetworkChangeEvent`.

        <Expandable defaultOpen title="CardNetworkChangeEvent">
          <ResponseField name="detectedCardNetworks" type="CardNetworks">
            All the detected card networks, including the ones that are not allowed.

            Use the following snippet to get the card network that should be presented to the user:

            `detectedCardNetworks.preferred ?? detectedCardNetworks.items[0]`

            <Expandable title="CardNetworks">
              <ResponseField name="items" type="CardNetworkDetails[]">
                An array of the card networks.

                <Expandable title="CardNetworkDetails">
                  <ResponseField name="allowed" type="boolean">
                    Whether or not the card network is allowed, according to `orderedAllowedCardNetworks` passed in the Client Session.
                  </ResponseField>

                  <ResponseField name="displayName" type="string">
                    A human readable name for the card network.
                  </ResponseField>

                  <ResponseField name="network" type="string">
                    A value that represents the card network in Primer's systems.
                  </ResponseField>
                </Expandable>
              </ResponseField>

              <ResponseField name="preferred" type="CardNetworkDetails | undefined">
                The first allowed card network in `items`.
                In case no network is allowed, `undefined`.

                <Expandable title="CardNetworkDetails">
                  <ResponseField name="allowed" type="boolean">
                    Whether or not the card network is allowed, according to `orderedAllowedCardNetworks` passed in the Client Session.
                  </ResponseField>

                  <ResponseField name="displayName" type="string">
                    A human readable name for the card network.
                  </ResponseField>

                  <ResponseField name="network" type="string">
                    A value that represents the card network in Primer's systems.
                  </ResponseField>
                </Expandable>
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="selectableCardNetworks" type="CardNetworks | undefined">
            In case the card has zero or only one network that is allowed, `undefined`. Otherwise, all the allowed cards.

            Use this to show the card networks the user can choose from in the case of a co-badged cards.

            <Expandable title="CardNetworks">
              <ResponseField name="items" type="CardNetworkDetails[]">
                An array of the card networks.

                <Expandable title="CardNetworkDetails">
                  <ResponseField name="allowed" type="boolean">
                    Whether or not the card network is allowed, according to `orderedAllowedCardNetworks` passed in the Client Session.
                  </ResponseField>

                  <ResponseField name="displayName" type="string">
                    A human readable name for the card network.
                  </ResponseField>

                  <ResponseField name="network" type="string">
                    A value that represents the card network in Primer's systems.
                  </ResponseField>
                </Expandable>
              </ResponseField>

              <ResponseField name="preferred" type="CardNetworkDetails | undefined">
                The first allowed card network in `items`.
                In case no network is allowed, `undefined`.

                <Expandable title="CardNetworkDetails">
                  <ResponseField name="allowed" type="boolean">
                    Whether or not the card network is allowed, according to `orderedAllowedCardNetworks` passed in the Client Session.
                  </ResponseField>

                  <ResponseField name="displayName" type="string">
                    A human readable name for the card network.
                  </ResponseField>

                  <ResponseField name="network" type="string">
                    A value that represents the card network in Primer's systems.
                  </ResponseField>
                </Expandable>
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="source" type="'REMOTE' | 'LOCAL' | 'LOCAL_FALLBACK'">
            The source of the information.

            <Expandable title="Values">
              <ResponseField name="LOCAL">
                This happens when less than 8 digits are entered in the cardnumber field.

                Headless Checkout retrieved the card networks using static information bundled with the SDK. This information can only identify international cards.
              </ResponseField>

              <ResponseField name="REMOTE">
                This happens when 8 digits or more are entered in the cardnumber field.

                Headless Checkout retrieved the card networks using Primer's BIN data.
              </ResponseField>

              <ResponseField name="LOCAL_FALLBACK">
                This happens when Headless Checkout fails to contact Primer's BIN data.

                Falls back to the static information bundled with the SDK (see `LOCAL`).
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onCardNetworksLoading" type="() => void" deprecated="Use onBinDataLoadingChange instead.">
        <Warning>
          **Deprecated:** This callback is deprecated. Use [`onBinDataLoadingChange`](#card.parameters.options-properties.onBinDataLoadingChange) instead.
        </Warning>

        Called when card network information is being fetched from Primer's servers.
        Will only trigger when `event.source === 'REMOTE'` in `onCardNetworksChange`.
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

### Returns

<Expandable title="Promise<ICardPaymentMethodManager | null>" defaultOpen>
  <ResponseField name="Promise<ICardPaymentMethodManager | null>">
    A promise that resolves to an instance of `ICardPaymentMethodManager` or `null`.

    <Expandable title="ICardPaymentMethodManager">
      <ResponseField name="createHostedInputs" type="() => HostedInputs">
        Create an object with three hosted inputs: `cardNumberInput`, `expiryInput`, and `cvvInput`.

        <Expandable title="HostedInputs">
          <ResponseField name="cardNumberInput" type="IHeadlessHostedInput">
            The headless hosted input for the card number.

            See [HeadlessHostedInput](/sdk/web/v2.x.x/primer-headless-checkout/types/HeadlessHostedInput).
          </ResponseField>

          <ResponseField name="expiryInput" type="IHeadlessHostedInput">
            The headless hosted input for the expiry date.

            See [HeadlessHostedInput](/sdk/web/v2.x.x/primer-headless-checkout/types/HeadlessHostedInput).
          </ResponseField>

          <ResponseField name="cvvInput" type="IHeadlessHostedInput">
            The headless hosted input for the CVV.

            See [HeadlessHostedInput](/sdk/web/v2.x.x/primer-headless-checkout/types/HeadlessHostedInput).
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="setCardholderName" type="(cardholderName: string) => void">
        Set the name of the cardholder.
      </ResponseField>

      <ResponseField name="removeHostedInputs" type="() => void">
        Remove the hosted inputs.
      </ResponseField>

      <ResponseField name="submit" type="() => Promise<void>">
        Create a payment method based on the current values after tokenization.
        Returns a Promise that resolves when the payment has been created.
      </ResponseField>

      <ResponseField name="validate" type="() => Promise<Validation>">
        Validate the state of the payment method. Returns a Promise that resolves
        with a Validation object.

        <Expandable title="Validation">
          <ResponseField name="valid" type="boolean" required>
            Indicates whether the validation was successful or not.
          </ResponseField>

          <ResponseField name="validationErrors" type="InputValidationError[]" required>
            An array of objects containing information about any input validation errors that occurred during the validation
            process.

            <Expandable title="InputValidationError">
              <ResponseField name="name" type="string" required>
                The name of the input field that produced the error.
              </ResponseField>

              <ResponseField name="error" type="string" required>
                The type of error that occurred.

                Possible values:

                * `cardNameRequired`: cardholder's name is not provided.
                * `cardNameContainsNumbers`: cardholder's name contains numbers.
                * `cardNameLength`: cardholder's name does not match the expected length (minimum: 2, maximum: 45 characters).
                * `cardNameContainsInvalidCharacters`: cardholder's name contains characters that are not supported (only Latin characters are allowed).
                * `cardRequired`: card number is not provided.
                * `unsupportedCardType`: provided card number does not match the allowed card networks.
                * `cardIncomplete`: provided card number does not match the expected length.
                * `cardInvalid`: provided card number is invalid. Additional details might be available in the `message` field.
                * `cvvRequired`: card's security code (CVV) is not provided.
                * `cvvIncomplete`: card's security code (CVV) does not match the expected length (minimum: 3 characters).
                * `cvvInvalid3`: card's security code (CVV) does not match the expected length (exact: 3 characters).
                * `cvvInvalid4`: card's security code (CVV) does not match the expected length (exact: 4 characters).
                * `expiryRequired`: card's expiry date is not provided.
                * `cardExpired`: card has expired.
                * `expiryMonthInvalid`: expiry date's month is invalid.
                * `expiryYearInvalid`: expiry date's year is invalid.
              </ResponseField>

              <ResponseField name="message" type="string" required>
                A human-readable message describing the error that occurred.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="error" type="string">
            A string describing any error that occurred during the validation process.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="reset" type="() => void">
        Reset the hosted fields to their initial state.
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## Native

```ts TS theme={"dark"}
createPaymentMethodManager(
	type: "PAYPAL" | "GOOGLE_PAY" | "APPLE_PAY",
): Promise<INativePaymentMethodManager | null>
```

Create an instance of the `INativePaymentMethodManager`, which can be used to manage native payment methods like
PayPal, Google Pay, and Apple Pay.

### Parameters

<Expandable defaultOpen title="Parameters">
  <ResponseField name="type" type="&#x22;PAYPAL&#x22; | &#x22;GOOGLE_PAY&#x22; | &#x22;APPLE_PAY&#x22;">
    The type of native payment method to manage.
  </ResponseField>
</Expandable>

### Returns

<Expandable title="Promise<INativePaymentMethodManager | null>" defaultOpen>
  <ResponseField name="Promise<INativePaymentMethodManager | null>">
    A promise that resolves to an instance of `INativePaymentMethodManager` or `null`.
    An interface for creating a native payment method button.

    <Expandable title="INativePaymentMethodManager">
      <ResponseField name="createButton" type="() => IHeadlessPaymentMethodButton">
        Create a native payment method button. Returns a
        [HeadlessPaymentMethodButton](/sdk/web/v2.x.x/primer-headless-checkout/types/HeadlessPaymentMethodButton).
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## Redirect

```ts TS theme={"dark"}
createPaymentMethodManager(
	type: PaymentMethodType,
): Promise<IRedirectPaymentMethodManager | null>
```

Create an instance of the `IRedirectPaymentMethodManager`, which can be used to manage redirect-based payment
methods.

### Parameters

<Expandable defaultOpen title="Parameters">
  <ResponseField name="type" type="PaymentMethodType">
    The type of redirect-based payment method to manage, one of [PaymentMethodType](/sdk/web/v2.x.x/constants/payment-method-types).
  </ResponseField>
</Expandable>

### Returns

<Expandable defaultOpen title="Promise<IRedirectPaymentMethodManager | null>">
  <ResponseField name="Promise<IRedirectPaymentMethodManager | null>">
    A promise that resolves to an instance of `IRedirectPaymentMethodManager` or `null`.

    <Expandable defaultOpen title="IRedirectPaymentMethodManager">
      <ResponseField name="start" type="() => Promise<void>">
        Start the redirect payment flow.
      </ResponseField>

      <ResponseField name="addEventListener" type="(event: EventTypes, callback: EventListener) => void">
        Add an event listener to the button.

        <Expandable title="Parameters">
          <ResponseField name="EventTypes" type="&#x22;blur&#x22; | &#x22;change&#x22; | &#x22;click&#x22; | &#x22;close&#x22; | &#x22;error&#x22; | &#x22;focus&#x22;">
            {" "}
          </ResponseField>

          <ResponseField name="EventListener" type="(event?: Event) => void">
            {" "}
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## Klarna

```ts TS theme={"dark"}
createPaymentMethodManager(
	type: "KLARNA",
	options?: KlarnaPaymentMethodManagerOptions
): Promise<IKlarnaPaymentMethodManager | null>
```

Create an instance of the `IKlarnaPaymentMethodManager`, which can be used to manage Klarna specific payment methods which also require an extra form and user interaction.

### Parameters

<Expandable defaultOpen title="Parameters">
  <ResponseField name="type" type="&#x22;KLARNA&#x22;">
    The type of payment method to manage.
  </ResponseField>

  <ResponseField name="options" type="KlarnaPaymentMethodManagerOptions">
    Options to configure the payment method manager.

    <Expandable defaultOpen title="Properties">
      <ResponseField name="onPaymentMethodCategoriesChange" type="(paymentMethodCategories: KlarnaPaymentMethodCategory[]) => void">
        A callback that is called when the payment categories for Klarna have
        changed. Sends back an array with the values needed to render the payment
        categories for Klarna.

        <Expandable title="Parameters">
          <ResponseField name="paymentMethodCategories" type="KlarnaPaymentMethodCategory[] | []">
            <Expandable title="Properties">
              <ResponseField name="id" type="string" post={["Represents the id of the payment method category"]}>
                {}
              </ResponseField>

              <ResponseField name="name" type="string" post={["Represents the name of the payment method category"]}>
                {}
              </ResponseField>

              <ResponseField
                name="descriptiveAssetUrl"
                type="string"
                post={[
"Represents the url of the asset that can be used to indicate a Klarna Payment",
]}
              >
                {}
              </ResponseField>

              <ResponseField
                name="standardAssetUrl"
                type="string"
                post={[
"Represents the url of the asset that can be used to indicate a Klarna Payment",
]}
              >
                {}
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

### Returns

<Expandable defaultOpen title="Promise<IKlarnaPaymentMethodManager | null>">
  <ResponseField name="Promise<IKlarnaPaymentMethodManager | null>">
    A promise that resolves to an instance of `IKlarnaPaymentMethodManager` or `null`.

    <Expandable title="IKlarnaPaymentMethodManager">
      <ResponseField name="start" type="(paymentPayload: KlarnaPaymentPayload) => Promise<void>">
        This function starts the payment process. It should be called with the
        selected payment method category id, when the user has selected and
        confirmed the desired payment category. The payment method category id which
        needs to be sent to the start function can be retrieved from the
        onPaymentMethodCategoriesChange function

        <Expandable>
          <ResponseField name="paymentPayload" type="{ paymentMethodCategoryId: string }">
            <Expandable title="Properties">
              <ResponseField name="paymentMethodCategoryId" type="string" post={["Represents the id of the payment method category"]}>
                {}
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="renderCategory" type="(details: RenderCategoryDetails) => Promise<void>">
        This function is used so that Klarna can render the selected payment
        category details (paymentMethodCategoryId) in a DOM element (containerId).
        It uses a callback (onHeightChange) to inform when the height of the
        contianer has changed.

        <Expandable>
          <ResponseField name="details" type="{ containerId: string, paymentMethodCategoryId: string, onHeightChange:(newHeight:number)=> void }">
            <Expandable title="Properties">
              <ResponseField name="containerId" type="string" post={["The container id of a DOM element in which the payment methods category details will be displayed"]}>
                {}
              </ResponseField>

              <ResponseField name="paymentMethodCategoryId" type="string" post={["The id of the payment method category selected i.e. 'pay_later', 'pay_now', 'pay_over_time'"]}>
                {}
              </ResponseField>

              <ResponseField name="onHeightChange" type="(height: number) => void" post={["The callback used to retrieve thew new height of the selected payment method categoy"]}>
                <Expandable title="Parameters">
                  <ResponseField name="height" type="number" post={["Represents the new height that should be used for the container that displays the  details of the category"]}>
                    {}
                  </ResponseField>
                </Expandable>
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## ACH

```ts TS theme={"dark"}
createPaymentMethodManager(
	type: "STRIPE_ACH",
	options?: AchPaymentMethodManagerOptions
): Promise<IAchPaymentMethodManager | null>
```

Create an instance of the `IAchPaymentMethodManager`, which can be used to manage ACH payment methods which also require an extra form and the mandate confirmation.

### Parameters

<Expandable defaultOpen title="Parameters">
  <ResponseField name="type" type="&#x22;STRIPE_ACH&#x22;">
    The type of payment method to manage.
  </ResponseField>

  <ResponseField name="options" type="AchPaymentMethodManagerOptions">
    Options to configure the payment method manager.

    <Expandable title="Properties">
      <ResponseField name="stripePublishableKey" type="string">
        Stripe Publishable Key, used to interact with Stripe's SDK and collect the bank account details, necessary for the `STRIPE_ACH` payment method. The Publishable Key can be found in the [Stripe Dashboard API keys](https://dashboard.stripe.com/test/apikeys).
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

### Returns

<Expandable defaultOpen title="Promise<IAchPaymentMethodManager | null>">
  <ResponseField name="Promise<IAchPaymentMethodManager | null>">
    A promise that resolves to an instance of `IAchPaymentMethodManager` or `null`.

    <Expandable title="IAchPaymentMethodManager">
      <ResponseField name="start" type="(data: T) => Promise<Validation | undefined>">
        Submits and validates the customer data starting the ACH payment method flow.

        When the payment method is `STRIPE_ACH`, the required data `T` is:

        ```typescript TS theme={"dark"}
        interface StripeAchFormData {
          firstName: string;
          lastName: string;
          emailAddress: string;
        }
        ```
      </ResponseField>

      <ResponseField name="collectBankAccountDetails" type="() => Promise<void>">
        When the payment method is `STRIPE_ACH`, displays the Stripe UI to collect the bank account details.

        Throws an error if the `start` method didn't run successfully or wasn't called before.
      </ResponseField>

      <ResponseField name="confirmMandate" type="() => Promise<void>">
        Submits the mandate confirmation. Should be triggered by a "Confirm" button next to the mandate text.

        Throws an error if the methods `start` and `collectBankAccountDetails` weren't successfully called before.
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>