Hyperswitch Unified Checkout Demo

The Hyperswitch demo app is a two-page website that showcases the capabilities of the Hyperswitch SDK for enabling a seamless e-commerce experience for customers. The website is designed to look like a typical e-commerce website with a homepage and a product page.

When customers click on checkout with Hyperswitch , they are taken to the product page, which displays Hyperswitch SDK and a grid of products. Checkout page is displayed with an image, name, price, and a "Buy Now" button. When a customer clicks on the "Buy Now" button, they are prompted to enter their payment information. The checkout process is handled by the Hyperswitch SDK, which securely collects and processes the customer's information.

The Hyperswitch demo app showcases several features of the Hyperswitch SDK, including:

1. Seamless checkout: Customers can complete their purchases with the best payment experience, thanks to the Hyperswitch SDK's integration with multiple payment gateways.
2. Security: The Hyperswitch SDK uses industry-standard encryption and security protocols to protect customer information.
3. Customizability: The SDK can be easily customized to match the branding and style of any e-commerce website.

Overview

The demo app provides all in one example for integration with Hyperswitch on the web

Feature	Description
Beautiful UI Component	Demo uses a unified checkout element called PaymentElement to fit in the checkout page, including many payments methods with real time validations of the customer information , formatting and autofill.
Multiple payment methods	The app offers multiple payment methods along with Card Payments ,Google Pay, Apple Pay, Paypal with single integration of PaymentElement.
Redirects	A redirect-based payment is support through Paypal, Afterpay, Klarna, Affirm, Giropay, SOFORT, iDEAL, EPS.
Country support	Picking a country from the dropdown will automatically filter payments supported for the selected country.
Dynamic 3D Secure for Visa and Mastercard	The app automatically handles the correct flow to complete card payments with 3D Secure, whether it’s required by the card or encoded in one of your payment intent.
Responsive design	The checkout experience works on all screen sizes. Note: Apple Pay works on Safari if the Wallet is enabled.

Integration

The source code for merchant frontend is inside the source folder. The core logic of the integration is mainly contained in three files :

1. App.js - Creates a payment intent to get the client_secret from the merchant server which inturn will get it from the Hyperswitch server through hyper node. Note: refer the link to setup merchant server.
2. Workspace.js - Workspace for checkout section and SDK. Customization changes can be seen here.
3. SDK.js - Loads the SDK with Paynow button which handles the confirm payment.

Hyperswitch Elements

Hyperswitch supports below elements for quick payments. Make sure to change the Element in the workspace.js to checkout other elements.

PaymentElement, CardNumberElement, CardCVCElement, CardExpiryElement

Get started with Node

You’ll need the following:

1. Node.js >=10.0.0
2. Modern browser that supports ES6 (Chrome to see the Payment Request, and Safari to see Apple Pay).
3. Hyperswitch account to accept payments (sign up for free).

Please refer the docs to setup node with merchant server. Note: Please make sure to update url for fetch api in App.js with your merchant server url.

Running the App

Run npm install

Install all the dependencies from package.json

Run npm run start

Merchant app will be running on http://localhost:3000/ .

Try out the live demo here!!