add-payment-method.js

import React, { useState, useContext, useEffect } from "react";
import { DashboardContext } from "../../../../../shared/context";
import { WebView } from "react-native-webview";
import { CORE_API_URL } from "../../../../../shared/api";
import { PageLoading } from "../../../../../assets/animations/loading";
import axios from "axios";
const AddPaymentMethod = () => {
  const context = useContext(DashboardContext);
  const { user, setUser, setUserStripeAccount } = context;
  const [sessionId, setSessionId] = useState(null);
  useEffect(() => {
    const apiCall = async () => {
      try {
        const response = await axios.post(
          `${CORE_API_URL}/checkout_onboarding`,
          {
            _id: user._id,
          }
        );
        const {
          checkoutSessionID,
          user: updatedUser,
          customer,
        } = response.data;

        setSessionId(checkoutSessionID);
        setUser(updatedUser);
        setUserStripeAccount(customer);
      } catch (error) {
        console.log(error);
      }
    };
    apiCall();
  }, []);
  const serverURL = "your-react-app-url";
  if (!sessionId) return <PageLoading />;
  return (
    <>
      {sessionId ? (
        <WebView
          allowFileAccess={true}
          scalesPageToFit={true}
          originWhitelist={["*"]}
          source={{
            uri: `${serverURL}/stripe-checkout/${sessionId}`,
          }}
          onNavigationStateChange={(navState) => {}}
        />
      ) : null}
    </>
  );
};

export default AddPaymentMethod;