In this comprehensive guide, we will walk through the process of setting up a payment system for your web app using Momen. The focus will be on creating the necessary database structures, integrating Stripe for payment processing, handling payment callbacks securely, and implementing frontend logic to create and manage orders. This tutorial is essential for anyone looking to monetize their web applications effectively.
The first step in setting up the payment system is to create a table to track orders. Since "order" is a reserved SQL keyword, we will name the table purchase_order to avoid conflicts and potential issues downstream. This table will hold all the necessary information about each purchase made by users.
Key fields in the purchase_order table include:
Amount: The price of the course purchased.
Purchaser: The account that made the purchase. An account can have multiple purchase orders, so this is a many-to-one relationship.
Status: Tracks the state of the order, such as "pending," "successful," or "failed."
Course: Though optional, it's useful to link each purchase to a specific course. Each course can have many related orders.
By defining these relationships, we ensure that the database accurately reflects the real-world interactions between accounts, courses, and purchases.
To keep track of the payment process, the order status should have at least two states:
Pending: When the order is created but payment is not yet confirmed.
Successful: When payment has been received and verified.
Failed: When payment did not go through or was declined.
These statuses help manage the lifecycle of each purchase and allow the system to respond appropriately to different payment outcomes.
Stripe is a popular payment processor that handles credit card payments securely. To integrate Stripe with Momen, you need to provide your Stripe API keys: a public key and a private key. In this example, sandbox keys are used, which allow testing with special test cards that simulate real transactions without actual money transfers.
Once these keys are entered and saved in Momen, the platform automatically generates several Actionflows and webhook endpoints to handle Stripe's callbacks for various events, including successful payments, refunds, invoices, and subscription changes.
Stripe sends webhook callbacks to notify your application about payment events. These callbacks are crucial for updating your database and granting access to purchased courses. However, Stripe may send multiple callbacks for the same payment event, so your system must handle duplicates gracefully to avoid processing the same payment multiple times.
To manage this, the payment callback action flow uses three conditions based on the payment status and whether the callback has already been processed:
Successful: Payment status is successful and the callback has not been processed yet.
Failed: Payment status is failed.
Repeated: Payment status is successful but the callback has already been processed (duplicate).
For successful, unprocessed callbacks, the system updates the purchase order status to "successful" and inserts ownership records linking the account to the purchased course. This ensures the user gains access to their course after payment.
For failed payments, the order status is updated to "failed," allowing the system to notify users or retry payments as needed.
Repeated callbacks are ignored to prevent duplicate processing.
When a payment is confirmed successful, the purchase order record is updated to reflect this. The status field is set to "successful," while the amount and purchaser fields remain unchanged. This update is filtered by the order ID passed within the Stripe callback, ensuring the correct order is updated.
Additionally, ownership of the course is recorded by inserting a record in the account_has_course relationship table. This table links the purchaser's account to the course, granting access. To avoid duplicate ownership entries, the insertion uses an "on conflict do nothing" clause, meaning if the user already owns the course, no duplicate record is created.
To recap the backend workflow:
User initiates payment through Stripe with an associated order ID.
Stripe processes the payment and sends one or more webhook callbacks with payment status.
The system checks if the callback has been processed before to avoid duplicates.
If payment is successful and unprocessed, the order status is updated, and course ownership is granted.
If payment failed, the order status is marked as failed.
If the callback is repeated, no action is taken.
This flow ensures reliable and secure handling of payments and user access.
After saving the payment integration settings, Momen automatically creates webhook endpoints for handling various Stripe events. You can check these webhooks in the Stripe dashboard, where you should see endpoints for:
Invoice events
Refunds
Subscription changes
Successful payments
These webhooks are essential for keeping your application in sync with Stripe's payment processing events.
On the application side, you need an Actionflow to create new purchase orders when users decide to buy a course. This create_order action flow takes two inputs:
course_id: The identifier of the course being purchased.
account_id: The identifier of the user making the purchase.
The order amount is fetched directly from the course's price in the database, preventing users from manipulating prices on the frontend. The new order is created with a status of "pending," and no payment record is attached yet since payment completion is handled asynchronously via Stripe callbacks.
This approach ensures secure and consistent order creation.
After the order is created and payment is initiated, it's important to verify that the total amount paid matches the order amount. This is done by querying payment records tied to the order and summing their grand total values.
If the total payments equal or exceed the order amount, the order is marked as "fully paid," and course ownership is granted accordingly.
If the payment is partial or incomplete, the order status is updated to "partially paid," which can trigger additional logic such as reminders or retries.
On the frontend, the user flow involves two key steps:
Create Order: When a user clicks to purchase a course, the frontend calls the create_order action flow with the current course ID and logged-in user's account ID.
Initiate Payment: Upon successful order creation, the frontend triggers the Stripe payment interface using the returned order ID and amount.
The amount sent to Stripe is multiplied by 100 to convert dollars to cents, as Stripe expects amounts in the smallest currency unit.
If any step fails, the frontend shows a toast notification to inform the user of the error.
To verify the entire payment setup, you can perform a test transaction using Stripe's default test card number 4242 4242 4242 4242
. After clicking "Pay Now," the payment should process successfully, and the system will update the order status and grant course ownership.
You can verify this by checking the account_has_course table in your database, which should reflect the newly purchased course linked to the user's account. The purchase_order table will show the order status updated to "successful."
If you remove ownership records for a user and their courses, the user's access to those courses should be revoked accordingly. This demonstrates the connection between payment processing, order management, and course access control.
Maintaining these relationships accurately is key to ensuring that only paying users can access premium content.
Setting up payment processing in Momen involves creating a robust data structure, securely integrating with Stripe, handling asynchronous payment callbacks, and implementing frontend logic for order creation and payment initiation. By following this approach, you can build a reliable and secure payment system for your online course platform or any other web app requiring monetization.
This method ensures accurate tracking of orders, prevents duplicate or fraudulent processing, and grants course access only after verified payment completion. With Momen's no-code tools and Stripe integration, you can efficiently manage payments without writing backend code.