LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Introduction
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
      • Intelligent Routing
      • Reconciliation
        • Getting Started with Recon
      • Alternate Payment Method Widgets
        • Hyperwidget Integration Guide
    • Roadmap - Q2 2025
      • Previous Roadmap - Q1 2025
      • Previous Roadmap - Q4 2024
      • Previous Roadmap - Q3 2024
      • Previous Roadmap - Q2 2024
      • Previous roadmap - Q1 2024
      • Previous roadmap - Q4 2023
  • Use-Cases
    • For SaaS Businesses
    • For B2B SaaS Businesses
    • For E-Commerce Businesses
    • For Marketplace/Platforms
  • Explore Hyperswitch
    • Payment Orchestration
      • Accept Payments
        • Connectors
          • Activate Connector on Hyperswitch
          • Try a Payment
          • Available Connectors
            • ACI
            • Adyen
            • Airwallex
            • Authorizedotnet
            • Bambora
            • Bank of America
            • Billwerk
            • Bluesnap
            • Braintree
            • Checkout
            • Coinbase
            • Cybersource
              • Apple Pay
              • Google Pay
            • dLocal
            • Fiserv
            • GlobalPayments
            • GoCardless
            • Klarna
            • Mollie
            • MultiSafepay
            • Nuvei
            • OpenNode
            • Paypal
            • PayU
            • Prophetpay
            • Rapyd
            • Shift4
            • Stripe
            • TrustPay
            • Volt
            • Worldline
            • Worldpay
            • Zen
            • Netcetera
              • Authenticating Payments via Netcetera Through HyperSwitch SDK
        • Setup Payment Methods
          • Cards
          • Wallets
            • Apple Pay
              • Web Domain
              • iOS Application
            • Google Pay
            • PayPal
          • Pay Later
          • Banks
            • Bank Debits
            • Bank Redirects
            • Bank Transfers
            • Open Banking
          • Crypto
          • Test Credentials
        • Payment Links
          • Configurations
          • Create Payment Links
          • Secure Payment Links
          • Setup Custom Domain
        • Save a Payment Method
        • Manual Capture
        • Incremental Authorization
        • Tokenization & Card Vault
          • Network Tokenisation
        • Supported Payment Workflows
        • Co-badged Cards
        • Webhooks
      • Process Payouts
        • Getting Started with Payouts
        • Using Saved Payment Methods
        • Smart Router for Payouts
        • Smart Retries in Payout
        • Payout Links
      • Smart Routing
        • Rule Based Routing
        • Volume Based Routing
        • Default Fallback Routing
      • Smart Retries
        • 3DS Step-up Retries
      • 3DS / Strong Customer Authentication
        • Setting up 3DS Decision Manager
        • Native 3DS Authentication
        • External Authentication for 3DS
      • Fraud & Risk Management
        • Activating FRM in Hyperswitch
        • Fraud Blocklist
      • Subscriptions
        • PG Agnostic Card Forwarding
        • Zero Amount Authorization
      • Split Payments
        • Stripe Split Payments
        • Adyen Split Payments
        • Xendit Split Payments
    • Checkout Experience
      • Customizable and Native Integrations
        • Web
          • Node And React
          • Customization
          • Error Codes
          • Node and HTML
          • Vanilla JS and REST API Integration
        • Android
          • Kotlin with Node Backend
          • Customization
          • Features
        • iOS
          • Swift with Node Backend
          • Customization
          • Features
        • React Native
          • React Native with Node Backend
          • Card Widget
          • Customization
        • Flutter
          • Flutter with Node Backend
          • Customization
        • Headless SDK
        • Server Setup
      • Click To Pay
        • Visa Click to Pay: V1 to V2 Migration
      • Payment Methods Management
    • Payment Operations
      • Managing Accounts and Profiles
        • ⚙️Control Centre Account setup
        • Hyperswitch Account Structure
      • Manage Your Team
      • Analytics & operations
        • Exporting payments data
      • Disputes / Chargebacks
      • Surcharge
        • Surcharge Setup guide
      • Multi-Tenancy
      • Data migration
        • Import data to Hyperswitch
        • Export data from Hyperswitch
    • Security and Compliance
      • PCI Compliance
      • Data Security
      • GDPR compliance
      • Identity and Access Management
    • E-commerce Platform Plugins by Hyperswitch
      • 🔌WooCommerce Plugin
        • Setup
        • Roadmap
        • Compatibility
        • FAQs
      • Saleor App
        • Setup
      • Automatic Tax calculation for Express Checkout wallets
  • Hyperswitch open source
    • Overview
      • Run Hyperswitch Locally Using Docker
        • Run Additional Services
      • Development Environment Setup
        • Backend
          • Configure and Run the Application
          • Try out APIs
        • SDK (Frontend)
        • Control Center
    • Deploy on AWS
      • Deploy on AWS using CloudFormation
      • Component-wise Deployment
        • Deploy app server
        • Deploy Control Center
        • Deploy web client
          • Production ready deployment
          • Integrate web client on your web app
          • Playground deployment for prototyping (optional)
        • Deploy Card Vault
          • Production ready deployment on AWS
          • Cloud setup guide
    • Deploy on Kubernetes
      • Deploy on GCP Using Helm Charts
      • Deploy on Azure Using Helm Charts
    • Exploration Guide
    • Account setup
      • Using Hyperswitch Control Center
      • Test a payment
      • Using postman
    • Troubleshooting
  • Testing Payments
  • Check list for Production
    • Going live
      • For SaaS Setup
      • For On-Prem Setup
        • Monitoring
        • PCI compliance
          • Get started
          • Completing the SAQ
        • Data Security
        • Updates
  • Learn more
    • API Reference
    • Connectors Supported
    • SDK Reference
      • React
      • JS
      • Custom Events
    • Hyperswitch architecture
      • Router
      • Storage
      • A Payments Switch with virtually zero overhead
    • Payment flows
    • Blog
  • Community Guidelines
Powered by GitBook

Compliance

  • Vulnerability Disclosure
  • PCI DSS 4.0
  • ISO 27001:2022

Community

  • Slack
  • Discord
  • GitHub Discussion
On this page

Was this helpful?

  1. Explore Hyperswitch
  2. Checkout Experience
  3. Customizable and Native Integrations

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.

Last updated 3 months ago

Was this helpful?

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 .

// 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.
});
// pod 'hyperswitch-sdk-ios'
paymentSession = PaymentSession(publishableKey: publishableKey)
// dependencies: implementation 'io.hyperswitch:hyperswitch-sdk-android:+' val 
paymentSession = PaymentSession(applicationContext, "YOUR_PUBLISHABLE_KEY")
// dependencies: flutter_hyperswitch: ^version_number
// run the following command to fetch and install the dependencies flutter pub get
import 'package:flutter_hyperswitch/flutter_hyperswitch.dart';
_hyper.init(HyperConfig(publishableKey: 'YOUR_PUBLISHABLE_KEY'));
import { HyperProvider } from "@juspay-tech/react-native-hyperswitch ";

function App() {
  return (
    <HyperProvider publishableKey="YOUR_PUBLISHABLE_KEY">
      // Your app code here
    </HyperProvider>
  );
}

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)
paymentSession.initPaymentSession(paymentIntentClientSecret)
paymentSession = hyper.initPaymentSession({
  clientSecret: client_secret,
});
final params = PaymentMethodParams(clientSecret: 'YOUR_PAYMENT_INTENT_CLIENT_SECRET')
Session _sessionId = await hyper.initPaymentSession(params);
import { useHyper } from "@juspay-tech/react-native-hyperswitch";

const { initPaymentSession } = useHyper();
const [paymentSession,setPaymentSession]=React.useState(null);
const initializeHeadless = async () => {

  const { clientSecret } = await fetchPaymentParams();
  const params={clientSecret:clientSecret}
  const paymentSession = await initPaymentSession(params);
  setPaymentSession(_=>paymentSession)
};

useEffect(() => {
  initializeHeadless();
}, []);
options (Required)
Description

clientSecret (string)

Required. Required to use as the identifier of the payment.

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()
    }
var handler: PaymentSessionHandler? = null

paymentSession.getCustomerSavedPaymentMethods { paymentSessionHandler ->
    handler = paymentSessionHandler
}

val savedPaymentMethid = handler!!.getCustomerDefaultSavedPaymentMethodData()

button.setOnClickListener { 
    handler!!.confirmWithCustomerDefaultPaymentMethod { paymentResult -> 
        println(paymentResult)
    }
}
paymentMethodSession = await paymentSession.getCustomerSavedPaymentMethods();

if (paymentMethodSession.error) {
    // handle the case where no default customer payment method is not present
} else {
    // use the customer_default_saved_payment_method_data to fulfill your usecases (render UI)
    const customer_default_saved_payment_method_data =
        paymentMethodSession.getCustomerDefaultSavedPaymentMethodData();
}

//handle press for pay button 
function handlePress() { 
    if (paymentMethodSession.error) {
        // handle the case where no default customer payment method is not present
    } else {
        // use the confirmWithCustomerDefaultPaymentMethod function to confirm and handle the payment session response
        const { error, status } = await
        paymentMethodSession.
            confirmWithCustomerDefaultPaymentMethod({
                confirmParams: {
                    // Make sure to change this to your payment completion page
                    return_url: "https://example.com/complete"
                },
                // if you wish to redirect always, otherwise it is defaulted to "if_required"
                redirect: "always",
            });

        // use error, status to complete the payment journey
        if (error) {
            if (error.message) {
                // handle error messages
                setMessage(error.message);
            } else {
                setMessage("An unexpected error occurred.");
            }
        }
        if (status) {
            // handle payment status
            handlePaymentStatus(status);
        }
    }
}
SavedSession? _savedSessionId = await _hyper.getCustomerSavedPaymentMethods(_sessionId!);

// use the customer_default_saved_payment_method_data to fulfill your usecases
final customer_default_saved_payment_method_data = await _hyper.getCustomerDefaultSavedPaymentMethodData(_savedSessionId!);
if (customer_default_saved_payment_method_data != null) {
    final paymentMethod = customer_default_saved_payment_method_data.left;
    if (paymentMethod != null) {
       final card = paymentMethod.left;
       if (card != null) {
          setState(() {
            _defaultPMText = "${card.nickName}  ${card.cardNumber}  ${card.expiryDate}";
          });
       } else {
          final wallet = paymentMethod.right;
          if (wallet != null) {
            setState(() {
              _defaultPMText = wallet.walletType;
            });
          }
       }
    } else {
      final err = customer_default_saved_payment_method_data.right;
      setState(() {
        _defaultPMText = err?.message ?? "No Default Payment Method present";
      });
    }
  }
}

// use the confirmWithCustomerDefaultPaymentMethod function to confirm and handle the payment session response
Future<void> _confirmPayment() async {
  final confirmWithCustomerDefaultPaymentMethodResponse = 
    await _hyper.confirmWithCustomerDefaultPaymentMethod(_savedSessionId!);
  if (confirmWithCustomerDefaultPaymentMethodResponse != null) {
    final message = confirmWithCustomerDefaultPaymentMethodResponse.message;
    if (message.isLeft) {
      _confirmStatusText = "${confirmWithCustomerDefaultPaymentMethodResponse.status.name}\n${message.left!.name}";
    } else {
      _confirmStatusText = "${confirmWithCustomerDefaultPaymentMethodResponse.status.name}\n${message.right}";
    }
  }
}
import { useHyper } from "@juspay-tech/react-native-hyperswitch";

const { getCustomerSavedPaymentMethods,
        getCustomerDefaultSavedPaymentMethodData,
        confirmWithCustomerDefaultPaymentMethod } = useHyper();

const [defaultPaymentMethodData,setDefaultPaymentMethodData]=React.useState(null)

React.useEffect(()=>{
    const getPaymentMethods=async()=>{
    const paymentMethodSession = await getCustomerSavedPaymentMethods(paymentSession);
    const customer_default_saved_payment_method_data = await getCustomerDefaultSavedPaymentMethodData(paymentMethodSession);
    setDefaultPaymentMethodData(_=>customer_default_saved_payment_method_data)
    }
    getPaymentMethods()
},[])

let confirmDefaultPaymentMethod=()=>{
const status = await confirmWithCustomerDefaultPaymentMethod(paymentMethodSession);
// handle status of payment   
 if (status != null) {
    const message = status.message;
    console.log(message)
    }
}

return(
//build the ui using defaultPaymentMethodData
//on click of pay use confirmDefaultPaymentMethod()
)

Payload for confirmWithCustomerDefaultPaymentMethod(payload)

options (Required)
Description

confirmParams (object)

Parameters that will be passed on to the Hyper API.

redirect (string)

(web only) Can be either 'always' or 'if_required'

By default, confirmWithCustomerDefaultPaymentMethod() will always redirect to your return_url after a successful confirmation. If you set redirect: "if_required", then this method will only redirect if your user chooses a redirection-based payment method.

ConfirmParams object

confirmParams
Description

return_url(string)

(web only) The url your customer will be directed to after they complete payment.

here