# Capital financing manual payment component

Allow connected accounts to make a manual payment toward eligible Capital financing.

The Capital financing manual payment embedded component provides the payment flow from the [Capital financing component](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md) as a standalone payment UI. Connected accounts can select an eligible financing, payment amount, and payment method without viewing the rest of their Capital financing history.

Use this component if you build your own Capital financing or reporting UI and want to reuse the Stripe manual payment flow. If you want connected accounts to view their financing balance, payment progress, and transaction history in addition to making payments, use the Capital financing component instead.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

### Get access to the Capital financing manual payment component.

Enter your email to request access.

```bash
curl https://docs.stripe.com/preview/register \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Referer: https://docs.stripe.com/connect/supported-embedded-components/capital-financing-manual-payment" \
  -d '{"email": "EMAIL", "preview": "capital_review_preview"}'
```

## Before you begin

- Embedded components are available to display to connected accounts in the United States (US), United Kingdom (GB), France (FR), Germany (DE), and Australia (AU).
- Before you activate Capital, you must [enable automatic offers](https://docs.stripe.com/capital/embedded-component-integration.md#enable-automatic-offers) and [submit your integration to Stripe for review](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-manual-payment.md#submit-for-review).

## Install the preview SDKs

Install a beta version of the Stripe SDKs to create account sessions for private preview components:

- [Ruby](https://github.com/stripe/stripe-ruby/#public-preview-sdks) `>=15.5.0-beta.1`
- [Python](https://github.com/stripe/stripe-python/#public-preview-sdks) `>=12.5.0b1`
- [PHP](https://github.com/stripe/stripe-php/#public-preview-sdks) `>=17.6.0-beta.1`
- [Node](https://github.com/stripe/stripe-node/#public-preview-sdks) `>=18.5.0-beta.1`
- [.NET](https://github.com/stripe/stripe-dotnet#public-preview-sdks) `>=48.5.0-beta.1`
- [Java](https://github.com/stripe/stripe-java#public-preview-sdks) `>=29.5.0-beta.1`
- [Go](https://github.com/stripe/stripe-go#public-preview-sdks) `>=82.5.0-beta.1`

Use the beta version of the Stripe’s client-side libraries to render private preview components:

#### npm

Install the library:

```bash
npm install --save @stripe/connect-js@preview
```

If you’re using React in your application:

```bash
npm install --save @stripe/react-connect-js@preview
```

#### GitHub

Download the [@stripe/connect-js](https://github.com/stripe/connect-js) and [@stripe/react-connect-js](https://github.com/stripe/react-connect-js) libraries source code directly from GitHub.

## Set up Connect.js

If you don’t already use Stripe embedded components in your application, [initialize Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#account-sessions) before you integrate the manual payment component.

## Create an Account Session

In your [create an Account Session](https://docs.stripe.com/api/account_sessions/create.md) request, specify `capital_financing_manual_payment` in the `components` parameter and set `enabled` to true.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-08-26.preview; embedded_connect_beta=v2;" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[capital_financing_manual_payment][enabled]=true"
```

## Render the component

Render the Capital financing manual payment component in the front end. By default, it renders inline.

#### HTML + JavaScript

```js
const manualPayment = stripeConnectInstance.create(
  'capital-financing-manual-payment'
);
container.appendChild(manualPayment);
```

## Configure presentation and callbacks

Use `inline` mode to place the payment flow directly into your financing page. Use `overlay` mode to open the payment flow in a component-owned overlay.

#### HTML + JavaScript

| Method | Type | Description | Default |
| --- | --- | --- | --- |
| `setPresentationMode` | `"inline" | "overlay"` | Sets whether the component renders inline or in a component-owned overlay. | `"inline"` |
| `setOnManualPaymentSubmitted` | `() => void` | Runs after the connected account successfully submits a payment. |  |
| `setOnOverlayClosed` | `() => void` | Runs when the component-owned overlay closes. This callback only applies to overlay mode. |  |

#### React

| React prop | Type | Description | Default |
| --- | --- | --- | --- |
| `presentationMode` | `"inline" | "overlay"` | Sets whether the component renders inline or in a component-owned overlay. | `"inline"` |
| `onManualPaymentSubmitted` | `() => void` | Runs after the connected account successfully submits a payment. Refresh your financing data and update your UI in this callback. |  |
| `onOverlayClosed` | `() => void` | Runs when the component-owned overlay closes. This callback only applies to overlay mode. |  |

### Add an inline payment flow

Place the inline component in a custom financing page.

```jsx

const refreshFinancingData = () => {
  // ...
}

return showManualPayment ? (
  <ConnectCapitalFinancingManualPayment
    presentationMode="inline"
    onManualPaymentSubmitted={refreshFinancingData}
  />
) : null;
```

### Open the payment flow in an overlay

Conditionally render the component in overlay mode.

```jsx
const [showManualPayment, setShowManualPayment] = useState(false);

const refreshFinancingData = () => {
  // ...
}

return (
  <>
    <button onClick={() => setShowManualPayment(true)}>Make a payment</button>
    {showManualPayment && (
      <ConnectCapitalFinancingManualPayment
        presentationMode="overlay"
        onManualPaymentSubmitted={refreshFinancingData}
        onOverlayClosed={() => setShowManualPayment(false)}
      />
    )}
  </>
);
```

## Handle eligibility and completion states

When the component renders, it filters the connected account’s financings to those eligible for a manual payment:

- If no financing is eligible, the component displays an ineligible view.
- If at least one financing is eligible, the connected account can select a financing, amount, and payment method.
- After a successful inline payment submission, the component triggers `onManualPaymentSubmitted` and stops rendering the completed payment flow.
- After a successful overlay payment submission, the component closes its overlay and triggers both `onOverlayClosed` and `onManualPaymentSubmitted`. Don’t rely on the order in which the callbacks run.
- If the connected account closes the overlay without submitting a payment, the component only triggers `onOverlayClosed`.

## Style the component

[Customize embedded components](https://docs.stripe.com/connect/customize-connect-embedded-components.md) to align the component’s fonts, colors, and UI style with your platform’s branding.

## Handle load errors

After rendering the component, review how to [handle load errors](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-load-errors) to make sure your integration can gracefully manage cases when components fail to load.

## Submit the integration for review

To use the component in live mode, Stripe and our financial partners must review and approve the customer-facing Capital UI and flow:

1. [Create an active test financing](https://docs.stripe.com/capital/testing.md#approve-or-reject-the-offer) with an outstanding balance that’s eligible for a manual payment.
2. Capture a preview of how the embedded component displays in your platform’s UI, such as screenshots or a recorded video. Include how your connected accounts arrive at the flow, each step of the flow, and what the connected account sees after close or payment submission. Also, include both inline and overlay modes if you plan to use both.
3. [Submit the preview to Stripe](https://form.asana.com/?k=8K51UWmWhttehNFD5qBLdg&d=974470123217835). After approval, Stripe enables you to use the component in live mode.

## Optional: Related Capital components

The capital-financing-manual-payment component is one of several embedded components available for Capital. Learn more about embedded components in the Set up Capital embedded components guide.

## See also

- [Set up Capital embedded components](https://docs.stripe.com/capital/embedded-component-integration.md)
- [Test your Capital integration](https://docs.stripe.com/capital/testing.md)