Render one-click saved-payment buttons that create or reuse an auto checkout session and keep FloPay's shared processing modal on the page.

Automatic Payment Buttons

FloPayAutomaticPaymentButton turns FloPay's backend-driven auto checkout mode into a client component you can place anywhere in your UI. It is designed for upsells, add-ons, renewals, and other saved-payment journeys where you want a single button instead of a full checkout form.

The button keeps the user on the current page while still giving you FloPay's shared processing, success, and decline modal states.

When To Use It

Use FloPayAutomaticPaymentButton when you want to:

trigger a saved-payment purchase from a success page or account area
pass the same session-creation data you would normally post to your backend
reuse an existing sessionId created elsewhere
style the button with the same theme system as the embedded buttons layout
receive explicit onClick, onSuccess, onError, and onDecline events

Basic Example

app/success/UpsellButton.tsx

'use client';
 
import { FloPayAutomaticPaymentButton } from '@flopay/react';
 
export function UpsellButton() {
  return (
    <FloPayAutomaticPaymentButton
      clientId="client_123"
      account={{
        userId: 'user_123',
        email: 'customer@example.com',
        firstName: 'Jane',
        lastName: 'Doe',
      }}
      items={[
        {
          providerItemId: 'upsell_ai_pack',
          providerItemName: 'AI Supercharger Pack',
          totalAmount: 249,
          overrideAmount: 80,
          currency: 'USD',
          quantity: 1,
        },
      ]}
      successUrl={`${window.location.origin}/success`}
      cancelUrl={`${window.location.origin}/success`}
      buttonsTheme="dark"
      onClick={() => {
        console.log('automatic payment button clicked');
      }}
      onSuccess={({ result, sessionId }) => {
        console.log('payment succeeded', result.status, sessionId);
      }}
      onError={(error) => {
        console.error(error.message);
      }}
      onDecline={(decline) => {
        console.log('payment declined', decline.code);
      }}
    >
      Purchase Item
    </FloPayAutomaticPaymentButton>
  );
}

Session Sources

You can render the button from either input shape:

sessionId when your backend already created the checkout session
inline session data via createSession
direct convenience props for inline creation: clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata

The component always forces checkoutMode="auto" under the hood, so it uses the saved payment method attached to the session.

Reuse An Existing Session

<FloPayAutomaticPaymentButton
  sessionId="sess_abc123"
  onSuccess={() => window.location.reload()}
>
  Purchase Item
</FloPayAutomaticPaymentButton>

Create The Session Inline

<FloPayAutomaticPaymentButton
  createSession={{
    clientId: 'client_123',
    account: {
      userId: 'user_123',
      email: 'customer@example.com',
    },
    items: [
      {
        providerItemId: 'upsell_ai_pack',
        providerItemName: 'AI Supercharger Pack',
        totalAmount: 249,
        overrideAmount: 80,
        currency: 'USD',
        quantity: 1,
      },
    ],
    successUrl: `${window.location.origin}/success`,
    cancelUrl: `${window.location.origin}/success`,
  }}
>
  Purchase Item
</FloPayAutomaticPaymentButton>

Do not pass both sessionId and inline session-creation props at the same time.

Styling And Slot Content

The button uses the same themed button system as FloPayCheckout in layout="buttons":

buttonsTheme supports the built-in theme presets
buttonsStyles lets you override the button container styles
children render inside the button, so you can treat them as the button slot content

<FloPayAutomaticPaymentButton
  sessionId="sess_abc123"
  buttonsTheme="rounded"
  buttonsStyles={{
    cardButton: {
      borderRadius: '999px',
      backgroundColor: '#111827',
      color: '#ffffff',
    },
    cardButtonFontSize: '1rem',
  }}
>
  <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <strong>Add AI Supercharger Pack</strong>
    <span style={{ opacity: 0.72 }}>$0.80 today</span>
  </span>
</FloPayAutomaticPaymentButton>

If children are omitted, the default embedded button content is rendered for you.

Events

Prop	Purpose
`onClick`	Fires when the button is pressed, before the automatic payment flow begins
`onSuccess`	Fires after the success modal state completes; includes the payment result and resolved session details
`onError`	Fires when the automatic payment flow fails with a `FloPayError`
`onDecline`	Fires when FloPay can classify the failure as a decline or cancellation event

FloPayAutomaticPaymentButton also extends the standard React button props, so disabled, className, aria-*, and similar attributes work as expected.

Authentication And Redirect Handling

Automatic Payment Buttons do not hard-fail when extra authentication is needed:

when the saved payment method can complete immediately, the button shows the shared processing and success modal states
when the payment provider returns a redirect-capable auth flow such as 3DS or PayPal, the SDK resumes that flow and completes the result handling for you
when FloPay returns authentication_required without a direct redirect token, the button opens an inline FloPayCheckout modal on the same page so the user can finish authentication without navigating away

This makes the component a better fit for upsells than raw backend-only auto mode.

Automatic Payment Buttons

Automatic Payment Buttons

When To Use It

Basic Example

Session Sources

Reuse An Existing Session

Create The Session Inline

Styling And Slot Content

Events

Authentication And Redirect Handling

See Also

On this page