Web

Migrate from Stripe on your web app

Migrate from Stripe on your web app in less than 15 mins!

Migrate from Stripe

If you are already integrated to Stripe as your payment processor, we have made migrating to Hyperswitch much simpler for you. And once you migrate, get immediate access to 40+ payment processors and features such as Smart Router, Unified analytics and many more.

Stripe’s paymentRequestButton is available under Hyperswitch’s UnifiedCheckout, therefore importing UnifiedCheckout would be sufficient.

The code from your Stripe integration to be removed and replaced is explained below in a step by step manner for both React and HTML frontend. You can find the details for both below.

Web - Node Backend and React Frontend

Step 1: Install Hyperswitch's SDK and server side dependencies from npm

  $ npm install @juspay-tech/react-hyper-js
  $ npm install @juspay-tech/hyper-js
  $ npm install @juspay-tech/hyperswitch-node

Step 2: Change the API key on the server side and modify the paymentIntent endpoint from your server side. You can get the API key from Developers page on the dashboard.

// from
const stripe = require("stripe")("your_stripe_api_key");
// to
const hyper = require("@juspay-tech/hyperswitch-node")(
  "your_hyperswitch_api_key"
);

// from
const paymentIntent = await stripe.paymentIntents.create({
// to
const paymentIntent = await hyper.paymentIntents.create({

Step 3: Call loadHyper() with you Hyperswitch publishable key to configure the SDK library, from your website

// from
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
// to
import { loadStripe } from "@juspay-tech/hyper-js";
import { hyperElements } from "@juspay-tech/react-hyper-js";

// from
const stripePromise = loadStripe("your_stripe_publishable_key");
// to
const hyperPromise = loadHyper("your_hyperswitch_publishable_key");

Step 4: Configure your checkout form to import from Hyperswitch

//from
import {
  PaymentElement,
  useStripe,
  useElements,
} from "@stripe/react-stripe-js";
//to
import {
  UnifiedCheckout,
  useStripe,
  useElements,
} from "@juspay-tech/react-hyper-js";

Step 5: Run your application to make a test payment. And verify the status of the transaction on Hyperswitch Dashboard and Stripe Dashboard. Congratulations ! You have successfully integrated Hyperswitch to your payments stack and you now have access to a suite of 40+ payment processors and acquirers.

Web - Node Backend and HTML Frontend

Step 1: Install Hyperswitch's node server dependency from npm

  $ npm install @juspay-tech/hyperswitch-node

Step 2: Change the API key on the server side and modify the paymentIntent endpoint from your server side

// from
const stripe = require("stripe")("your_stripe_api_key");
// to
const hyper = require("@juspay-tech/hyperswitch-node")(
  "your_hyperswitch_api_key"
);

// from
const paymentIntent = await stripe.paymentIntents.create({
// to
const paymentIntent = await hyper.paymentIntents.create({

Step 3: Load the Hyperswitch directly from beta.hyperswitch.io to remain PCI compliant while collecting the customer's payment details

// from
<script src="https://js.stripe.com/v3/"></script>
// to
<script src="https://beta.hyperswitch.io/v1/HyperLoader.js"></script>

Step 4: Initiate the SDK with your Hyperswitch publishable key from your website

// from
const stripe = Stripe("your_stripe_publishable_key");
// to
const hyper = Hyper("your_hyperswitch_publishable_key");

Step 5: Run your application to make a test payment. And verify the status of the transaction on Hyperswitch Dashboard and Stripe Dashboard. Congratulations ! You have successfully integrated Hyperswitch to your payments stack and you now have access to a suite of 40+ payment processors and acquirers.

Want an easy migration from Stripe for Apps? We got you covered. Follow the docs for Android, iOS and React Native apps.