Zephyr SDK React

Zephyr SDK React is a React Native component which enables you to seamlessly integrate and use Breeze 1 Click Checkout in your React Native app.

Find the interactive documentation here.

Installation

In your react native project directory, run the following command:

npm install @juspay/zephyr-sdk-react

This will install the Zephyr SDK React package in your project.

Usage

Importing the package

import { Zephyr } from '@juspay/zephyr-sdk-react';

Opening the Checkout View

<Zephyr
  configuration={zephyrConfig}
  callbacks={zephyrCallbacks}
  checkoutPayload={{ cart: userCart }}
  ref={zephyrRef}
  style={{ height: 500, width: 500 }}
/>

Parameters for Zephyr Component

| Parameter | Type | Description | | --------------- | ------ | --------------------------------------------------------------------------------- | | configuration | object | Configuration object for Zephyr SDK. | | callbacks | object | Callbacks object for Zephyr SDK. | | checkoutPayload | object | Payload object for Zephyr SDK. | | ref | object | Ref object for Zephyr SDK. | | style | object | Optional style object for Zephyr SDK. Control the dimensions of the Checkout view |

Extensive documentation for each of the above parameters can be found here

Configuration Object

| Parameter | Type | Description | | ------------ | ------ | -------------------------------------------------------------------------------- | | merchantId | string | Merchant ID provided by Juspay. | | shopUrl | string | URL of your shop/store | | shopPlatform | string | Platform of your shop/store. Possible values are shopify. | | environment | string | Environment to be used for the SDK. Possible values are production and beta. |

Callbacks Object

| Parameter | Type | Description | | ---------- | -------- | --------------------------------------------------- | | onEvent | function | Callback for handling events emitted by Zephyr SDK. | | onComplete | function | Callback for handling successful checkout. | | onError | function | Callback for handling errors during checkout. | | onClose | function | Callback for handling close of Zephyr Checkout. |

Payload Object

| Parameter | Type | Description | | --------- | ------ | ----------------------------------------------- | | cart | object | Cart object obtained from your shop's platform. |

Ref Object

| Parameter | Type | Description | | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | | handleBackPress | function | Function for handling back press on Zephyr Checkout View, returns true if you are supposed to handle the backPress. |

Example

import React, { useRef } from 'react';
import {
  BackHandler, // Important //
  // Other UI related imports required for your app //
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleProp,
  View,
  ViewStyle
} from 'react-native';
import {
  Zephyr,
  ZephyrCheckoutSuccessEvent,
  ZephyrConfiguration,
  ZephyrEvent,
  ZephyrOnSuccessCallback,
  ZephyrOnCloseCallback,
  ZephyrOnErrorCallback,
  ZephyrOnErrorEvent,
  ZephyrOnEventCallback,
  ZephyrCallbacks,
  ZephyrRef
} from '@juspay/zephyr-sdk-react';

const zephyrConfig: ZephyrConfiguration = {
  merchantId: 'd2cstorebeta',
  shopUrl: 'https://d2c-store-beta.myshopify.com',
  shopPlatform: 'shopify',
  environment: 'production'
};

function App(): React.JSX.Element {
  // Reference to Zephyr SDK
  // Will be used for handling back press
  const zephyrRef = useRef<ZephyrRef>(null);

  // Defining callback handlers for Zephyr SDK

  const zephyrOnCheckoutSuccessCallback: ZephyrOnSuccessCallback = (
    r: ZephyrCheckoutSuccessEvent
  ) => {
    console.log('CheckoutSuccess! Order placed');
    // handle successful order placement here
    setShowCheckout(false);
  };

  const zephyrOnErrorCallback: ZephyrOnErrorCallback = (e: ZephyrOnErrorEvent) => {
    console.log('CheckoutError! Order failed');
    // handle error cases here
    console.error(e);
  };

  const zephyrOnCloseCallback: ZephyrOnCloseCallback = () => {
    // handle closure of checkout here
    setShowCheckout(false);
  };

  const zephyrOnEventCallback: ZephyrOnEventCallback = (e: ZephyrEvent) => {
    // handle events like hide-loader here
    console.log(e);
  };

  // Assembling the all callbacks into a single object
  const zephyrCallbacks: ZephyrCallbacks = {
    onComplete: zephyrOnCheckoutSuccessCallback,
    onError: zephyrOnErrorCallback,
    onClose: zephyrOnCloseCallback,
    onEvent: zephyrOnEventCallback
  };

  // Registering a hardware back press handler
  BackHandler.addEventListener('hardwareBackPress', () => {
    // Checking if Zephyr SDK will handle the back press or not
    const handleBackPress = zephyrRef.current?.handleBackPress();

    // If Zephyr SDK is handling the back press, we return false
    if (handleBackPress && showCheckout) {
      setShowCheckout(false);
      return false;
    }

    // If Zephyr SDK is not handling the back press, handle your back press logic here
    return true;
  });

  const handleBuyNowClick = () => {
    setShowCheckout(true);
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
        <View style={containerViewStyle}>
          <View style={productViewStyle}>
            // Your Product component here
            <Product buyNow={handleBuyNowClick} />
          </View>
          <View style={checkoutViewStyle}>
            {showCheckout && (
              // Calling Zephyr Checkout Component
              <Zephyr
                configuration={zephyrConfig}
                callbacks={zephyrCallbacks}
                checkoutPayload={{ cart: userCart }} // cart object obtained from your shop's platform
                ref={zephyrRef}
              />
            )}
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

Additional Integration requirements

For allowing your app & Zephyr SDK to open UPI apps, you need to add following platform specific changes:

Android

Add the following to your android/app/src/main/AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <queries>
    <intent>
      <data
        android:scheme="upi"
        android:pathPattern=".*"
        android:host="pay"
      />
    </intent>
    <intent>
      <data
        android:scheme="upi"
        android:pathPattern=".*"
        android:host="mandate"
      />
    </intent>
    <intent>
      <data
        android:scheme="upi"
        android:pathPattern=".*"
      />
    </intent>
  </queries>

  // Other manifest related code
</manifest>