Customer clicks the "Buy" button on a website or app, triggering an event in the frontend.
Frontend captures customer and order details, such as product information, price, and user information.
Frontend sends a request to the backend server to initiate the payment process.
Backend server receives the request and validates the order details, ensuring the data is accurate and complete.
Backend server creates a payment intent or token via the payment gateway's API, passing in the necessary order details (e.g., Stripe or Square API).
Payment gateway API returns a unique token or intent ID, representing the payment information securely.
Backend server sends the token or intent ID back to the frontend.
Frontend securely embeds the token or intent ID in the payment form, ensuring sensitive information is not exposed.
Customer enters their payment information, such as credit card number, expiration date, and CVV, in the payment form.
Frontend submits the form, sending the payment information along with the token or intent ID to the payment gateway.
Payment gateway processes the transaction by authenticating the customer's payment information, performing fraud checks, and verifying the funds' availability.
If necessary, the payment gateway routes the transaction to the acquiring bank (the merchant's bank) for further processing.
Acquiring bank forwards the transaction to the issuing bank (the customer's bank) via card networks (e.g., Visa, Mastercard, etc.).
Issuing bank validates the transaction, verifies the funds, and either approves or declines the transaction.
Issuing bank sends the transaction response (approved or declined) back to the acquiring bank.
Acquiring bank relays the transaction response to the payment gateway.
Payment gateway sends the transaction response to the backend server.
Backend server processes the response, updating the order and payment status accordingly (e.g., marking the order as paid or informing the customer of a declined transaction).
Backend server sends a confirmation or error message to the frontend, depending on the transaction response.
Frontend displays the appropriate message to the customer, confirming the successful purchase or prompting them to try again in case of a declined transaction.