React Native with Node Backend

$ yarn add @Pesaswap-/Pesaswap-sdk-react-native

$ npm install @Pesaswap-/Pesaswap-sdk-react-native

yarn add react-native-code-push
yarn add react-native-gesture-handler
yarn add react-native-inappbrowser-reborn
yarn add react-native-safe-area-context
yarn add react-native-svg
yarn add @sentry/react-native
yarn add react-native-pager-view
yarn add react-native-screens
yarn add react-native-Pesaswap-kount
yarn add react-native-klarna-inapp-sdk

pod install

<string name="CodePushDeploymentKey">PesaswapRNDemo</string>

include(":react-native-code-push");

project(":react-native-code-push").projectDir = new File(
  rootProject.projectDir,
  "../node_modules/react-native-code-push/android/app"
);

<manifest xmlns:tools="http://schemas.android.com/tools">
  <application
    tools:replace="android:allowBackup">
    <!-- Other existing elements in the <application> tag -->
  </application>
</manifest>

import { HyperProvider } from "@Pesaswap-/Pesaswap-sdk-react-native";

import { HyperProvider } from '@Pesaswap-/Pesaswap-sdk-react-native';

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

import { useHyper } from '@Pesaswap-/Pesaswap-sdk-react-native';

const fetchPaymentParams = async () => {
  const response = await fetch(`${API_URL}/create-payment`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
  });
  const val = await response.json();
  return val;
};

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

const initializePaymentSheet = async () => {
  const { clientSecret } = await fetchPaymentParams();

  const customAppearance = {
    colors: {
      light: {
        primary: "#00FF00",
      },
    },
  };

  const params = {
    merchantDisplayName: "Example, Inc.",
    clientSecret: clientSecret,
    appearance: customAppearance,
  };

  const paymentSession = await initPaymentSession(params);
  setPaymentSession(() => paymentSession);
};

useEffect(() => {
  initializePaymentSheet();
}, []);

const openPaymentSheet = async () => {
  console.log("Payment Session Params --> ", paymentSession);
  const status = await presentPaymentSheet(paymentSession);
  console.log('presentPaymentSheet response: ', status);
  
  const { error, paymentOption } = status;
  
  if (error) {
    switch (error.code) {
      case 'cancelled':
        console.log('cancelled', 'PaymentSheet was closed');
        break;
      case 'failed':
        console.log('failed', 'Payment failed');
        break;
      default:
        console.log('status not captured', 'Please check the integration');
        break;
    }
    console.log(`Error code: ${error.code}`, error.message);
  } else if (paymentOption) {
    switch (paymentOption.label) {
      case 'succeeded':
        console.log('succeeded', 'Your order has succeeded');
        break;
      case 'requires_capture':
        console.log('requires_capture', 'Your order requires capture');
        break;
      default:
        console.log('status not captured', 'Please check the integration');
        break;
    }
  } else {
    console.log('Something went wrong', 'Please check the integration');
  }
};

return (
  <Screen>
    <Button variant="primary" title="Checkout" onPress={openPaymentSheet} />
  </Screen>
);