Switch Payment Mode
Toggle between one-time payment and subscription modes for your application.
Payment Mode Configuration
Choose between one-time payment and subscription modes for your application.
Subscription Mode
Users will be charged on a recurring basis (monthly or yearly) to access your application.
Code Implementation
TypeScript
const useOneTimePayment = false; Implementation Steps
Follow these steps to implement the payment mode in your application.
1
Configure Pricing Page
Go to the src/app/pricing/page.tsx file and implement the pricing page with conditional rendering based on the payment mode.
2
Toggle Payment Mode
Set the useOneTimePayment boolean to true for one-time payment or false for subscription mode. The UI will update automatically based on this value.
3
Use Appropriate Price IDs
For subscription mode, use priceIdMonthly and priceIdAnnually. For one-time payment mode, use priceIdMonthly.
Payment Mode Configuration Complete
Your payment system is now configured to support both one-time payments and subscriptions. The implementation includes:
- Toggle between payment modes with a boolean flag
- Conditional rendering of pricing plans based on payment mode
- Appropriate price IDs for different payment options
- Seamless user experience with clear pricing information
