Headless SDK

Hyperswitch is designed to facilitate the integration and management of payment-related functionalities in a decoupled or headless architecture with flexibility to customize your checkout UI.

This section guides you through the integration of Hyperswitch Headless for both web and mobile clients

Customize the payment experience using Headless functions

1. Initialize the Hyperswitch SDK

Initialize Hyperswitch Headless SDK onto your app with your publishable key. To get a Publishable Key please find it here.

// Source Hyperloader on your HTML file using the <script /> tag
hyper = Hyper.init("YOUR_PUBLISHABLE_KEY",{
    customBackendUrl: "YOUR_BACKEND_URL",
    //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
});

2. Create a Payment Intent

Make a request to the endpoint on your server to create a new Payment. The clientSecret returned by your endpoint is used to initialize the payment session.

Important: Make sure to never share your API key with your client application as this could potentially compromise your security

3. Initialize your Payment Session

Initialize a Payment Session by passing the clientSecret to the initPaymentSession

paymentSession?.initPaymentSession(paymentIntentClientSecret: paymentIntentClientSecret)

4. Craft a customized payments experience

Using the paymentSession object, the default customer payment method data can be fetched, using which you can craft your own payments experience. The paymentSession object also exposes a confirmWithCustomerDefaultPaymentMethod function, using which you can confirm and handle the payment session.

private var handler: PaymentSessionHandler?
 
func initSavedPaymentMethodSessionCallback(handler: PaymentSessionHandler)-> Void {
        self.handler = handler
        }
    
@objc func launchHeadless(_ sender: Any) {
    hyperViewModel.paymentSession?.getCustomerSavedPaymentMethods(initSavedPaymentMethodSessionCallback)
    getDefault.isEnabled = true
    getLast.isEnabled = true
    getData.isEnabled = true
    }
    
@objc func getCustomerDefaultSavedPaymentMethodData(_ sender: Any) {
    let paymentMethod = self.handler?.getCustomerDefaultSavedPaymentMethodData()
    }

Payload for confirmWithCustomerDefaultPaymentMethod(payload)

ConfirmParams object

Last updated