Last updated
Was this helpful?
Last updated
Was this helpful?
Before following these steps, please configure your payment methods . Use this guide to integrate hyperswitch
SDK to your HTML app. You can also use this demo app as a reference with your Hyperswitch credentials to test the setup.
Follow the section.
Use HyperLoader
to ensure PCI compliant means of accepting payment details from your customer and sending it directly to the hyperswitch server. Always load hyperLoader
from https://beta.hyperswitch.io/v1/HyperLoader.js
to ensure compliance. Please refrain from including the script in a bundle or hosting it yourself.
Add one empty placeholder div
to your checkout form for each Widget that you’ll mount. HyperLoader
inserts an iframe into each div
to securely collect the customer’s email address and payment information.
Immediately make a request to the endpoint on your server to create a new Payment as soon as your checkout page loads. The clientSecret
returned by your endpoint is used to complete the payment.
Important: Make sure to never share your API key with your client application as this could potentially compromise your payment flow
Following this, create a unifiedCheckout
and mount it to the placeholder div
in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the Payment
, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type.
Note: This step is not required for ExpressCheckout
Listen to the form’s submit event to know when to confirm the payment through the hyper API.
Call confirmPayment()
, passing along the unifiedCheckout
and a return_url
to indicate where Hyper should redirect the user after they complete the payment. Hyper redirects the customer to an authentication page depending on the payment method. After the customer completes the authentication process, they’re redirected to the return_url
.
Also if there are any immediate errors (for example, your customer’s card is declined), HyperLoader
returns an error. Show that error message to your customer so they can try again.
When Hyper redirects the customer to the return_url
, the payment_intent_client_secret
query parameter is appended by HyperLoader
. Use this to retrieve the Payment
to determine what to show to your customer.
Congratulations! Now that you have integrated the Hyperswitch SDK on your app, you can customize the payment elements to blend with the rest of your app.
Initialize HyperLoader
onto your app with your publishable key with the Hyper
constructor. You’ll use HyperLoader
to create the Unified Checkout and complete the payment on the client. To get a Publishable Key please find it .
For customization, please follow the .
Integrate hyper SDK to your HTML Web App using Hyperswitch-node