Skip to main content
The Stripe connect integration allows users to effortlessly connect their Stripe account for payment processing. This enables users to accept payments for their bookings, with automatic payment collection and processing through Stripe’s secure platform.

​
Ways to connect Stripe

There are two ways to connect your Stripe account in Cal.com platform integrations:
1

Direct Stripe Connect atom

Use the standalone Stripe Connect button atom to provide a dedicated connection interface. This is ideal when you want to give users a specific place to manage their Stripe connection.Below code snippet can be used to render the Stripe connect button:

import { StripeConnect } from "@calcom/atoms";

export default function ConnectStripe() {
  return (
     <>
        <StripeConnect />
     </>
  );
}
For a demonstration of the Stripe connect atom, please refer to the video below.

2

Event Type Settings payment tab

Use the Event Type Settings component with the payments tab enabled. This approach integrates Stripe connection directly into the event type configuration flow, allowing users to set up payments while configuring their event types.Below code snippet can be used to render the Event Type Settings with the payments tab:

import { EventTypeSettings } from "@calcom/atoms";

export default function EventType() {
// your event type ID
const eventTypeId = 123; 

  return (
      <>
        <EventTypeSettings 
          id={eventTypeId} 
          allowDelete={true}
          tabs={["setup", "availability", "team", "limits", "advanced", "recurring", "payments"]}
        />
      </>
  );
}
For a demonstration of the Stripe connect atom via Event Type Settings, please refer to the video below.

​
Advanced usage

​
Team integration

To integrate Stripe to team events, pass the teamId prop. Below code snippet can be used to render the Stripe connect atom for team: 
import { StripeConnect } from "@calcom/atoms";

export default function ConnectTeamStripe() {
  const teamId = 123; // Your team ID

  return (
    <>
      <StripeConnect teamId={teamId} />
    </>
  );
}

​
Custom labels

You can customize the button labels for different states (default, loading, and already connected): 
import { StripeConnect } from "@calcom/atoms";

export default function ConnectStripe() {
  return (
    <>
      <StripeConnect
        label="Connect to Stripe"
        loadingLabel="Checking connection..."
        alreadyConnectedLabel="Stripe Connected"
      />
    </>
  );
}

​
Redirect URLs

You can specify custom redirect URLs for successful connections and error scenarios: 
import { StripeConnect } from "@calcom/atoms";

export default function ConnectStripe() {
  return (
    <>
      <StripeConnect redir="/dashboard/payments" errorRedir="/dashboard/settings" />
    </>
  );
}

​
Handling connection status

You can use callback functions to handle connection check success and errors: 
import { StripeConnect } from "@calcom/atoms";

export default function ConnectStripe() {
  const handleCheckSuccess = () => {
    console.log("Stripe connection verified successfully");
  };

  const handleCheckError = (error) => {
    console.error("Error checking Stripe connection:", error);
  };

  return (
    <>
      <StripeConnect onCheckSuccess={handleCheckSuccess} onCheckError={handleCheckError} />
    </>
  );
}

​
Custom styling

You can customize the appearance of the button using the className, icon, and color props: 
import { StripeConnect } from "@calcom/atoms";

export default function ConnectStripe() {
  return (
    <>
      <StripeConnect className="!bg-purple-600 hover:!bg-purple-700" icon="credit-card" color="secondary" />
    </>
  );
}

​
Props

We offer all kinds of customizations to the Stripe connect via props. Below is a list of props that can be passed to the Stripe Connect.

NameRequiredDescription
teamIdNoThe ID of the team for team-based Stripe connections
iconNoCustom icon to display on the button (defaults to “credit-card”)
colorNoButton color variant (defaults to “primary”)
isClickableNoBoolean to override the disabled state and make the button always clickable
classNameNoTo pass in custom classnames from outside for styling the atom
labelNoThe label for the connect button
alreadyConnectedLabelNoLabel to display when atom is in already connected state
loadingLabelNoLabel to display when atom is in loading state
onCheckErrorNoA callback function to handle errors when checking the connection status
redirNoA custom redirect URL link where the user gets redirected after successful authentication
errorRedirNoA custom redirect URL link where the user gets redirected after authentication failure
initialDataNoInitial data to be passed for the connection check
onCheckSuccessNoA callback function to handle success when checking the connection status
Please ensure all custom classnames are valid Tailwind CSS classnames. Note that sometimes the custom classnames may fail to override the styling with the classnames that you might have passed via props. That is because the clsx utility function that we use to override classnames inside our components has some limitations. A simple get around to solve this issue is to just prefix your classnames with ! property just before passing in any classname.

​
Setting price and currency

Once you have connected your Stripe account, you can set the price and currency for your event type. This will make sure that the booking is a paid event. For a demonstration on how to set the price and currency, please refer to the video below.

​
Integration with Payment Form

The Stripe connect atom works seamlessly with the Payment Form atom. First, connect your Stripe account using this atom, then use the Payment Form atom to process payments for bookings. For more information on accepting payments and how to combine payment form with Stripe, see the Payment Form documentation.