Private preview

Capital financing manual payment component Private preview

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

The Capital financing manual payment embedded component provides the payment flow from the Capital financing component 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.

Get access to the Capital financing manual payment component.

Enter your email to request access.

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 and submit your integration to Stripe for review .

Install the preview SDKs

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

• Ruby >= 15. 5. 0-beta. 1
• Python >= 12. 5. 0b1
• PHP >= 17. 6. 0-beta. 1
• Node >= 18. 5. 0-beta. 1
• .NET >= 48. 5. 0-beta. 1
• Java >= 29. 5. 0-beta. 1
• Go >= 82. 5. 0-beta. 1

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

Install the library:

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

If you’re using React in your application:

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

Set up Connect.js

If you don’t already use Stripe embedded components in your application, initialise Connect.js before you integrate the manual payment component.

Create an Account Session

In your create an Account Session request, specify capital_financing_manual_payment in the components parameter and set enabled to true.

Command Line

Select a language

cURL

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

Render the component

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

capital-financing-manual-payment.js

Select a language

HTML + JavaScript

React

No results

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.

Add an inline payment flow

Place the inline component in a custom financing page.

inline-manual-payment.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.

overlay-manual-payment.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

Customise embedded components to align the component’s fonts, colours and UI style with your platform’s branding.

Handle load errors

After rendering the component, review how to handle 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 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 . After approval, Stripe enables you to use the component in live mode.

Optional Related Capital components

See also

• Set up Capital embedded components
• Test your Capital integration