This repository demonstrates how to build a hybrid sign-up and subscription form using Clerk for authentication and Stripe for payment processing. The form allows users to sign up and subscribe to a service in a single, streamlined process.
- User Authentication: Integrates Clerk for user sign-up and login.
- Payment Integration: Uses Stripe to handle subscription payments.
- Hybrid Form: Combines user registration and subscription in one form.
- UI/Component Library: shadcn
-
When the user submits the form, the card details are sent to Stripe to tokenize the card. That token, and the selected product, are stored as
unsafeMetadata
. -
The app will signal to Clerk that a user is trying to sign up.
-
Clerk sends the user an OTP to their email.
-
The user enters the code into the application.
-
The app signals to Clerk that the user completed the signup and the account should be created.
-
The
user.created
webhook is triggered and the payload is sent to an API route in the application. -
The webhook handler uses the Stripe SDK to create a payment method, customer, and subscription.
-
Once done, the user record is updated from Next and the user is allowed to proceed