Hyperswitch Unified Checkout

Accept payments from around the globe with a secure, Unified Checkout that gives your customers the best in class payment experience

Web unified checkout SDK is an inclusive, consistent and blended payment experience optimized for the best conversion rates.

Inclusive: A variety of global payment methods including cards, buy now pay later and digital wallets are supported by the Unified Checkout, with adaptation to local preferences and ability to local language customization.

Consistent: With a diverse set of payment methods supported, the Unified Checkout provides a singular consistent payment experience across platforms (web, android and ios) powered by smart payment forms, minimal redirections and intelligent retries.

Blended: The Unified Checkout includes 40+ styling APIs, which could be tweaked to make the payment experience blend with your product. Your users will get a fully native and embedded payment experience within your app or website

Quick Start Guide • Setup Instructions • Fast Integration for Stripe Users • Connect your Hyperswitch self Hosted Server • FAQs
Join us in building HyperSwitch • Community • Bugs and feature requests • Versioning • Copyright and License

While the Unified Checkout is pre-optimized for maximum conversions, it does not restrict you to stick to a one-size-fits-all approach. Using the SDK APIs, you get complete control over modifying the payment experience by,

• 📝 Including new fields to the payment form on a single processor like Stripe or Braintree
• 💳 Prioritizing payment methods by 90% to add & maintain integrations
• 🎨 Switching themes and layouts of checkout page with full visibility and control

⚡️ Quick Start Guide

Ways to get started with Hyperswitch:

• Try it in our Sandbox Environment: Fast and easy to start.

• Install in your local system: Configurations and setup required in your system. Suitable if you like to customise the core offering, learn more

🛠️ Setup Instructions

Setup Node

Check if your machine has node already installed by running the below command on your local machine.

node -v

If your machine does not have node installed in it, you can install it from here

Clone the repository

Clone the repository from Bitbucket and save in your folder.

git clone https://github.com/juspay/hyperswitch-web.git
cd hyperswitch-web

Setup the repository

First install all the node modules by running the following command

npm install

Once the installation is successful, you can run the app with the following command -

npm run start:dev

This will trigger a build of the project. On a successful build, you should see a message Compiled successfully in your terminal.

Now you can proceed with launching the playground. The playground is a demo app where you can test your payments. In a separate terminal, run the following command to start the app on your local machine.

npm run start:playground

This step will prompt you to enter 2 details -

• Publishable Key - This is a public key that resides on your client side for authentication
• Secret Key - This is the API key which should only be restricted to your app server

About Env Configs

For ease of development and deployment there are configs in /Hyperswitch-react-demo-app/.env

• HYPERSWITCH_PUBLISHABLE_KEY - Publishable key of your Hyperswitch Account
• HYPERSWITCH_SECRET_KEY - Api key of your Hyperswitch Account
• HYPERSWITCH_SERVER_URL - URL of your hosted Hyperswitch Backend server
• HYPERSWITCH_CLIENT_URL - URL of your hosted Hyperswitch SDK
• SELF_SERVER_URL - URL of your node server (/Hyperswitch-react-demo-app/server.js)

Logging

Logging from the payment checkout web client is crucial for tracking and monitoring the flow of payments. It provides a transparent record of events, errors, and user interactions, aiding developers and support teams in identifying issues, debugging, and ensuring the security and reliability of payment processes. Well-implemented logging enhances traceability and facilitates a more efficient resolution of potential problems in the payment checkout experience.

Logs are sent to the server via non-blocking Beacon API requests. This means that even if the logging endpoint configured is incorrect, it would not affect the core payment functionalities. You can find more about the structure of logging request payload in the beaconApiCall function in the OrcaLogger.res file.

If you want to collect logs, you can do so by setting up an endpoint on your server to receive, process and persist logs.

In the webpack.common.js file, you would have to enable the logging flag, and configure the logging endpoint and log level.

let logEndpoint =
  sdkEnv === "prod"
    ? "<YOUR_PRODUCTION_LOGGING_ENDPOINT>"
    : "<YOUR_SANDBOX_LOGGING_ENDPOINT>";

// Set this to true to enable logging
let enableLogging = true;

// Choose from DEBUG, INFO, WARNING, ERROR, SILENT
let loggingLevel = "DEBUG";

Understanding Logging Levels

Now let's test the integration by making a payment from your web client!

🔌 Integrate Hyperswitch on your App

Now that the project is up and running, integrating Hyperswitch on your web-app is fast & easy. Try the steps below to get a feel of how quick the setup is:

1. Get API keys from our dashboard.
2. Follow the instructions detailed on our documentation page.

🔌Connect your Hyperswitch self hosted Server

Modify the HYPERSWITCH_SERVER_URL key in .env file by adding the BE hosted url

🤔 FAQs

Got more questions? Please refer to our FAQs page.

External Services

• Braintree
• Trustpay
• Sentry
• ApplePay
• GooglePay
• Klarna
• Kount

💪 Join us in building Hyperswitch

🤝 Our Belief

Payments should be open, fast, reliable and affordable to serve the billions of people at scale.

Globally payment diversity has been growing at a rapid pace. There are hundreds of payment processors and new payment methods like BNPL, RTP etc. Businesses need to embrace this diversity to increase conversion, reduce cost and improve control. But integrating and maintaining multiple processors needs a lot of dev effort. Why should devs across companies repeat the same work? Why can't it be unified and reused? Hence, Hyperswitch was born to create that reusable core and let companies build and customise it as per their specific requirements.

✨ Our Values

1. Embrace Payments Diversity: It will drive innovation in the ecosystem in multiple ways.
2. Make it Open Source: Increases trust; Improves the quality and reusability of software.
3. Be community driven: It enables participatory design and development.
4. Build it like Systems Software: This sets a high bar for Reliability, Security and Performance SLAs.
5. Maximise Value Creation: For developers, customers & partners.

🤍 Contributing

This project is being created and maintained by Juspay, South Asia's largest payments orchestrator/switch, processing more than 50 Million transactions per day. The solution has 1Mn+ lines of Haskell code built over ten years. Hyperswitch Web leverages our experience in building large-scale, enterprise-grade & frictionless payment solutions. It is built afresh for the global markets as an open-source product in Rescript. We are long-term committed to building and making it useful for the community.

The product roadmap is open for the community's feedback. We shall evolve a prioritisation process that is open and community-driven. We welcome contributions from the community.

👥 Community

Get updates on Hyperswitch development and chat with the community:

• Read and subscribe to the official Hyperswitch blog.
• Join our Discord server.
• Join our Slack workspace.

🐞 Bugs and feature requests

Please read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

©️ Copyright and License

This product is licensed under the Apache 2.0 License.

✨ Thanks to all contributors

Thank you for your support in hyperswitch's growth. Keep up the great work! 🥂