Widgets

Integrate Juspay Hyperswitch SDK using individual payment widgets for granular control over your payment flow.

Requirements

• Android 6.0 (API level 23) and above

• Android Gradle Plugin 8.5+

• Gradle 8.8+

• AndroidX

1. Setup the server

$ npm install @juspay-tech/hyperswitch-node

Follow the Server Setup section.

2. Build checkout page on your app

2.1 Add the Buildscript Classpath

To start integrating the Juspay Hyperswitch SDK, add the following classpath to the buildscript block of your project-level build.gradle file:

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "io.hyperswitch:hyperswitch-gradle-plugin:$latest_version"
    }
}

2.2 Apply the Plugin

Add the following plugin to the plugins block of your app-level build.gradle file:

plugins {
    // Apply Hyperswitch Plugin
    id 'io.hyperswitch.plugin'
}

2.3 Implement the HyperInterface

Next, implement the HyperInterface in your Activity. This involves extending FragmentActivity and implementing the HyperInterface:

class WidgetActivity : AppCompatActivity(), HyperInterface {
    // ...
}

2.4 Initialize Payment Configuration

Set up the SDK using your publishable key:

private fun initialiseSDK() {
    // Initialize Payment Configuration
    PaymentConfiguration.init(applicationContext, publishKey)
}

3. Implementation

Choose from list of available widgets to integrate:

1. Card Element

2. Google Pay

3. PayPal

4. Express Checkout

Final Step

Congratulations! You have successfully integrated Juspay Hyperswitch widgets into your app. This approach gives you granular control over each payment method and allows for custom UI/UX design while leveraging Juspay Hyperswitch's payment processing capabilities.

Next step: