DEV Community

Vedant Khairnar for Hyperswitch

Posted on

What happens when you click pay now?

This chapter will cover the payment flows available with Hyperswitch. Please reach out to us to learn more about the payment flows supported!

What is Hyperswitch youtube video

Payments flow

There are multiple stages in a Payment flow depending on the payment methods that are involved. Considering an one-time payment method where there was no redirection involved, the following stages form the Payment flow:

a. Creating a Payment: When your customer wants to checkout, create a payment by hitting the payments/create endpoint. Fetch and store the payment_id and client_secret

b. Loading the SDK: After your customer checks out, load the Hyperswitch SDK by initiating it with the client_secret and publishable_key

c. SDK being rendered: After you initiate the SDK, the SDK makes several API calls involving the /sessions and /payment_methods endpoints to load relevant payment methods and any saved cards associated with the customer

d. Customer enters the payment method data: After the SDK is fully rendered, your customer would choose a payment method and enter the relevant information and click pay

e. Confirming the payment: After the customer clicks pay, the SDK calls the payments/confirm endpoint with the customer's payment method details and post response, it displays the payment status

payment process overview

Here's a more detailed version of the payment flow:

payment flow

How does Payment flow vary across Payment methods?

Customer Action Direct/Redirect flows Payment - finalized immediately Payment - finalized later
Customer action required before payments/ confirm Within Hyperswitch SDK Non 3DS Cards Bank Debits like ACH Debit, BACS Debit, SEPA Debit
Customer action required before payments/ confirm 3rd party Redirect/SDK - Wallets like Apple Pay, Google pay, Paypal, AliPay - BNPL like Klarna, Afterpay, Affirm
Customer action required after payments/ confirm 3rd party Redirect - 3DS cards - Bank Redirects like iDeal, Giropay, eps - Bank Transfers like ACH Transfer, SEPA Transfer, BACS Transfer, Multibanco - Crypto wallets like Cryptopay

Use-cases supported by Hyperswitch

  • Accept online payments Get started with accepting one time payments globally on your online store
  • Store mandates & recurring payments Setup payments for a future date or charge your customers on a recurring basis
  • Manage payouts Facilitate payouts for global network of partners and service providers
  • Save a card during payment Learn how you can save your customers' cards in a secure PCI compliant manner
  • Manage payments on your platform/marketplace Accept payments from your customers and process payouts to the sellers on your marketplace
  • Accept payments on your e-commerce platform Give your Wordpress store a lightweight an embedded payment experience with the Hyperswitch WooCommerce plugin
  • Create payment links Accept payments for your products through reusable links without writing any code

What are PaymentIntent and PaymentAttempt objects and how do they work in Hyperswitch?

Hyperswitch uses the PaymentIntent object to track the status of a payment initiated by you. Since, Hyperswitch enables retrying a single payment multiple times across different processors until a successful transaction, we track each of these payment attempts through separate PaymentAttempt objects.

While PaymentIntent and PaymentAttempt have their own state machines, the various states in PaymentAttempt are also constrained by their respective mapping to the PaymentIntent statuses.

PaymentIntent state machine

The following is an abridged version of the PaymentIntent state machine flow that covers majority of the above payment use-cases.

PaymentAttempt state machine

The following is an abridged version of the PaymentAttempt state machine flow that covers majority of the above payment use-cases.


Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

As developers, we create a lot of value through the applications we build. Payments are the means to capture some of that value for ourselves. Surprisingly, the effort to set up a payments stack is often exaggerated. This is what we aim to solve at Hyperswitch by building a free and open payments switch. If you resonate with this vision, you can join the movement to help build an open payments ecosystem!

contributors

Learn more about how you can set up your own payments stack in minutes with Hyperswitch


Top comments (0)