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.
- Seamless checkout: Customers can complete their purchases with the best payment experience, thanks to the Hyperswitch SDK's integration with multiple payment gateways.
- Security: The Hyperswitch SDK uses industry-standard encryption and security protocols to protect customer information.
- Customizability: The SDK can be easily customized to match the branding and style of any e-commerce website.
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. |
The source code for merchant frontend is inside the source folder. The core logic of the integration is mainly contained in three files :
- App.js - Creates a payment intent to get the
client_secretfrom the merchant server which inturn will get it from the Hyperswitch server through hyper node. Note: refer the link to setup merchant server. - Workspace.js - Workspace for checkout section and SDK. Customization changes can be seen here.
- SDK.js - Loads the SDK with Paynow button which handles the confirm payment.
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
You’ll need the following:
- Node.js >=10.0.0
- Modern browser that supports ES6 (Chrome to see the Payment Request, and Safari to see Apple Pay).
- 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.
Install all the dependencies from package.json
Merchant app will be running on http://localhost:3000/ .
Try out the live demo here!!