Stripe Connect - Cal

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:

<Steps> <Step title="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:

```js

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.

<p></p>

    <iframe
      style={{ width: "100%", maxWidth: "560px" }}
      height="315"
      src="https://www.loom.com/embed/9d1c0b6a68a14a31b990bf753eb9a07d"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="true"
    ></iframe>

<p></p>

  </Step>

  <Step title="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:

    ```js

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.

<iframe
  style={{ width: "100%", maxWidth: "560px" }}
  height="315"
  src="https://www.loom.com/embed/2a7ace7a1fc64830b54776517bbff0bd"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen="true"
></iframe>

</Step> </Steps>

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.

Name	Required	Description
teamId	No	The ID of the team for team-based Stripe connections
icon	No	Custom icon to display on the button (defaults to "credit-card")
color	No	Button color variant (defaults to "primary")
isClickable	No	Boolean to override the disabled state and make the button always clickable
className	No	To pass in custom classnames from outside for styling the atom
label	No	The label for the connect button
alreadyConnectedLabel	No	Label to display when atom is in already connected state
loadingLabel	No	Label to display when atom is in loading state
onCheckError	No	A callback function to handle errors when checking the connection status
redir	No	A custom redirect URL link where the user gets redirected after successful authentication
errorRedir	No	A custom redirect URL link where the user gets redirected after authentication failure
initialData	No	Initial data to be passed for the connection check
onCheckSuccess	No	A callback function to handle success when checking the connection status

<Note> 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. </Note>

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.

<iframe
  style={{ width: "100%", maxWidth: "560px" }}
  height="315"
  src="https://www.loom.com/embed/17a18481138342bf9dc25e14033cb5a1"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen="true"
></iframe>

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.