> ## Documentation Index
> Fetch the complete documentation index at: https://cal.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Stripe Connect
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:
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 theme={null}
import { StripeConnect } from "@calcom/atoms";
export default function ConnectStripe() {
return (
<>
);
}
```
For a demonstration of the Stripe connect atom, please refer to the video below.
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 theme={null}
import { EventTypeSettings } from "@calcom/atoms";
export default function EventType() {
// your event type ID
const eventTypeId = 123;
return (
<>
);
}
```
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:
```js theme={null}
import { StripeConnect } from "@calcom/atoms";
export default function ConnectTeamStripe() {
const teamId = 123; // Your team ID
return (
<>
);
}
```
### Custom labels
You can customize the button labels for different states (default, loading, and already connected):
```js theme={null}
import { StripeConnect } from "@calcom/atoms";
export default function ConnectStripe() {
return (
<>
);
}
```
### Redirect URLs
You can specify custom redirect URLs for successful connections and error scenarios:
```js theme={null}
import { StripeConnect } from "@calcom/atoms";
export default function ConnectStripe() {
return (
<>
);
}
```
### Handling connection status
You can use callback functions to handle connection check success and errors:
```js theme={null}
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 (
<>
);
}
```
### Custom styling
You can customize the appearance of the button using the `className`, `icon`, and `color` props:
```js theme={null}
import { StripeConnect } from "@calcom/atoms";
export default function ConnectStripe() {
return (
<>
);
}
```
## 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 |
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](/platform/atoms/payment-form).