Skip to content

Commit 68d3d9d

Browse files
Ryukemeisterdevin-ai-integration[bot]
Ryukemeister
and
devin-ai-integration[bot]
authored
docs: add Stripe Connect atom documentation (#24791)
* docs: add Stripe Connect atom documentation Co-Authored-By: [email protected] <[email protected]> * docs: restructure Stripe Connect docs with Steps component - Add Steps component explaining two ways to connect Stripe - Step 1: Direct Stripe Connect atom usage - Step 2: Event Type Settings payment tab usage - Include code examples for both methods - Add image placeholders for visual demonstrations - Move advanced usage examples under separate section Co-Authored-By: [email protected] <[email protected]> * chore: add link to stripe connect atom * chore: update docs * chore: implement feedback --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1 parent 717a26f commit 68d3d9d

File tree

2 files changed

+243
-1
lines changed

2 files changed

+243
-1
lines changed

‎docs/mint.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,8 @@
226226
"platform/atoms/google-calendar-connect",
227227
"platform/atoms/list-schedules",
228228
"platform/atoms/outlook-calendar-connect",
229-
"platform/atoms/payment-form"
229+
"platform/atoms/payment-form",
230+
"platform/atoms/stripe-connect"
230231
]
231232
},
232233
{

‎docs/platform/atoms/stripe-connect.mdx‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
---
2+
title: "Stripe Connect"
3+
---
4+
5+
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.
6+
7+
## Ways to connect Stripe
8+
9+
There are two ways to connect your Stripe account in Cal.com platform integrations:
10+
11+
<Steps>
12+
<Step title="Direct Stripe Connect atom">
13+
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.
14+
15+
Below code snippet can be used to render the Stripe connect button:
16+
17+
```js
18+
19+
import { StripeConnect } from "@calcom/atoms";
20+
21+
export default function ConnectStripe() {
22+
return (
23+
<>
24+
<StripeConnect />
25+
</>
26+
);
27+
}
28+
```
29+
30+
For a demonstration of the Stripe connect atom, please refer to the video below.
31+
32+
<p></p>
33+
34+
<iframe
35+
style={{ width: "100%", maxWidth: "560px" }}
36+
height="315"
37+
src="https://www.loom.com/embed/9d1c0b6a68a14a31b990bf753eb9a07d"
38+
frameborder="0"
39+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
40+
allowfullscreen="true"
41+
></iframe>
42+
43+
<p></p>
44+
45+
</Step>
46+
47+
<Step title="Event Type Settings payment tab">
48+
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.
49+
50+
Below code snippet can be used to render the Event Type Settings with the payments tab:
51+
52+
```js
53+
54+
import { EventTypeSettings } from "@calcom/atoms";
55+
56+
export default function EventType() {
57+
// your event type ID
58+
const eventTypeId = 123;
59+
60+
return (
61+
<>
62+
<EventTypeSettings
63+
id={eventTypeId}
64+
allowDelete={true}
65+
tabs={["setup", "availability", "team", "limits", "advanced", "recurring", "payments"]}
66+
/>
67+
</>
68+
);
69+
}
70+
```
71+
72+
For a demonstration of the Stripe connect atom via Event Type Settings, please refer to the video below.
73+
74+
<p></p>
75+
76+
<iframe
77+
style={{ width: "100%", maxWidth: "560px" }}
78+
height="315"
79+
src="https://www.loom.com/embed/2a7ace7a1fc64830b54776517bbff0bd"
80+
frameborder="0"
81+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
82+
allowfullscreen="true"
83+
></iframe>
84+
85+
<p></p>
86+
87+
</Step>
88+
</Steps>
89+
90+
## Advanced usage
91+
92+
### Team integration
93+
94+
To integrate Stripe to team events, pass the `teamId` prop.
95+
96+
Below code snippet can be used to render the Stripe connect atom for team:
97+
98+
```js
99+
import { StripeConnect } from "@calcom/atoms";
100+
101+
export default function ConnectTeamStripe() {
102+
const teamId = 123; // Your team ID
103+
104+
return (
105+
<>
106+
<StripeConnect teamId={teamId} />
107+
</>
108+
);
109+
}
110+
```
111+
112+
### Custom labels
113+
114+
You can customize the button labels for different states (default, loading, and already connected):
115+
116+
```js
117+
import { StripeConnect } from "@calcom/atoms";
118+
119+
export default function ConnectStripe() {
120+
return (
121+
<>
122+
<StripeConnect
123+
label="Connect to Stripe"
124+
loadingLabel="Checking connection..."
125+
alreadyConnectedLabel="Stripe Connected"
126+
/>
127+
</>
128+
);
129+
}
130+
```
131+
132+
### Redirect URLs
133+
134+
You can specify custom redirect URLs for successful connections and error scenarios:
135+
136+
```js
137+
import { StripeConnect } from "@calcom/atoms";
138+
139+
export default function ConnectStripe() {
140+
return (
141+
<>
142+
<StripeConnect redir="/dashboard/payments" errorRedir="/dashboard/settings" />
143+
</>
144+
);
145+
}
146+
```
147+
148+
### Handling connection status
149+
150+
You can use callback functions to handle connection check success and errors:
151+
152+
```js
153+
import { StripeConnect } from "@calcom/atoms";
154+
155+
export default function ConnectStripe() {
156+
const handleCheckSuccess = () => {
157+
console.log("Stripe connection verified successfully");
158+
};
159+
160+
const handleCheckError = (error) => {
161+
console.error("Error checking Stripe connection:", error);
162+
};
163+
164+
return (
165+
<>
166+
<StripeConnect onCheckSuccess={handleCheckSuccess} onCheckError={handleCheckError} />
167+
</>
168+
);
169+
}
170+
```
171+
172+
### Custom styling
173+
174+
You can customize the appearance of the button using the `className`, `icon`, and `color` props:
175+
176+
```js
177+
import { StripeConnect } from "@calcom/atoms";
178+
179+
export default function ConnectStripe() {
180+
return (
181+
<>
182+
<StripeConnect className="!bg-purple-600 hover:!bg-purple-700" icon="credit-card" color="secondary" />
183+
</>
184+
);
185+
}
186+
```
187+
188+
## Props
189+
190+
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.
191+
192+
<p></p>
193+
194+
| Name | Required | Description |
195+
| :-------------------- | :------- | :---------------------------------------------------------------------------------------- |
196+
| teamId | No | The ID of the team for team-based Stripe connections |
197+
| icon | No | Custom icon to display on the button (defaults to "credit-card") |
198+
| color | No | Button color variant (defaults to "primary") |
199+
| isClickable | No | Boolean to override the disabled state and make the button always clickable |
200+
| className | No | To pass in custom classnames from outside for styling the atom |
201+
| label | No | The label for the connect button |
202+
| alreadyConnectedLabel | No | Label to display when atom is in already connected state |
203+
| loadingLabel | No | Label to display when atom is in loading state |
204+
| onCheckError | No | A callback function to handle errors when checking the connection status |
205+
| redir | No | A custom redirect URL link where the user gets redirected after successful authentication |
206+
| errorRedir | No | A custom redirect URL link where the user gets redirected after authentication failure |
207+
| initialData | No | Initial data to be passed for the connection check |
208+
| onCheckSuccess | No | A callback function to handle success when checking the connection status |
209+
210+
<Note>
211+
Please ensure all custom classnames are valid Tailwind CSS classnames. Note that sometimes the custom
212+
classnames may fail to override the styling with the classnames that you might have passed via props. That
213+
is because the clsx utility function that we use to override classnames inside our components has some
214+
limitations. A simple get around to solve this issue is to just prefix your classnames with ! property just
215+
before passing in any classname.
216+
</Note>
217+
218+
## Setting price and currency
219+
220+
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.
221+
222+
For a demonstration on how to set the price and currency, please refer to the video below.
223+
224+
<p></p>
225+
226+
<iframe
227+
style={{ width: "100%", maxWidth: "560px" }}
228+
height="315"
229+
src="https://www.loom.com/embed/17a18481138342bf9dc25e14033cb5a1"
230+
frameborder="0"
231+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
232+
allowfullscreen="true"
233+
></iframe>
234+
235+
<p></p>
236+
237+
## Integration with Payment Form
238+
239+
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.
240+
241+
For more information on accepting payments and how to combine payment form with Stripe, see the [Payment Form documentation](/platform/atoms/payment-form).

0 commit comments

Comments
 (0)