Kotlin with Node Backend

Integrate hyper SDK to your Kotlin App using hyperswitch-node

In this section, you will get detailed instructions for integrating the Hyperswitch native Android SDK for your Android app

Use this guide to integrate hyper SDK to your Android app. You can use this as a reference with your Hyperswitch credentials to test the setup. You can also checkout the App on Google Play Store to test the payment flow.

Demo App

Requirements

• Android 5.0 (API level 21) and above

• Android Gradle Plugin 7.3.1

• Gradle 7.5.1+

• AndroidX

1. Setup the server

1.1 Install the hyperswitch-node library

Install the package and import it in your code

$ npm install @juspay-tech/hyperswitch-node

1.2 Create a payment

Before creating a payment, import the hyperswitch-node dependencies and initialize it with your API key.

const hyper = require("@juspay-tech/hyperwitch-node")(‘YOUR_API_KEY’);

Add an endpoint on your server that creates a Payment. Creating a Payment helps to establish the intent of the customer to start a payment. It also helps to track the customer’s payment lifecycle, keeping track of failed payment attempts and ensuring the customer is only charged once. Return the client_secret obtained in the response to securely complete the payment on the client.

// Create a Payment with the order amount and currency
app.post("/create-payment", async (req, res) => {
    try {
        const paymentIntent = await hyper.paymentIntents.create({
            currency: "USD",
            amount: 100,
        });
        // Send publishable key and PaymentIntent details to client
        res.send({
            clientSecret: paymentIntent.client_secret,
        });
    } catch (err) {
        return res.status(400).send({
            error: {
                message: err.message,
            },
        });
    }
});

2. Build checkout page on your app

2.1 Add the Hyperswitch dependency

To start integrating the Hyperswitch SDK, add the following dependency to the dependencies block of your build.gradle file:

dependencies {
    // Hyperswitch Android SDK
    implementation 'io.hyperswitch:hyperswitch-sdk-android:+'
}

2.2 Implement the HyperInterface

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

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

Note:

PaymentSession is designed to work with AndroidX activities. Ensure that your CheckoutActivity extends FragmentActivity or its subclass from the AndroidX library

2.4 Setup the SDK and fetch a Payment

Set up the SDK using your publishable key. This is essential for initializing a PaymentSession:

val paymentSession = PaymentSession(applicationContext, "YOUR_PUBLISHABLE_KEY");

Note:

PaymentSession needs to be initialised in onCreate method of your FragmentActivity

Note:

For an open-source setup, use the following parameters:

val paymentSession = PaymentSession(applicationContext, "YOUR_PUBLISHABLE_KEY", "YOUR_CUSTOM_BACKEND_URL", "YOUR_CUSTOM_LOG_URL")

Fetch a Payment

Request your server to fetch a payment as soon as your view is loaded. Store the client_secret returned by your server. The PaymentSession will use this secret to complete the payment process.

3. Complete the payment on your app

Initialise Payment Session

Initialise the payment session with the client_secret:

paymentSession.initPaymentSession(paymentIntentClientSecret)

Handle Payment Result

Handle the payment result in the completion block. Display appropriate messages to your customer based on the outcome of the payment:

private fun onPaymentSheetResult(paymentResult: PaymentSheetResult) {
    when (paymentResult) {
        is PaymentSheetResult.Completed -> {
            showToast("Payment complete!")
        }
        is PaymentSheetResult.Canceled -> {
            Log.i(TAG, "Payment canceled!")
        }
        is PaymentSheetResult.Failed -> {
            showAlert("Payment failed", paymentResult.error.localizedMessage)
        }
    }
}

Present the Payment Page

Create a configuration object to customize the payment sheet and present the payment page:

val configuration = PaymentSheet.Configuration("Your_app, Inc.")

// Present Payment Page
paymentSession.presentPaymentSheet(configuration, ::onPaymentSheetResult)

Final Step

Congratulations! You have successfully integrated the Hyperswitch Android SDK into your app. You can now customize the payment sheet to match the look and feel of your app.

Next step:

💳Payment methods setup