Apple Pay using @stripe/stripe-react-native is not working showing some hook call error - React native

MuhammadSaqibNoor
December 27, 2022
228 views
0 votes
2 Answers

When i am trying to implement Apple Pay using @stripe/stripe-react-native then is not working showing some hook call , Code & Error showing below:

    import { StripeProvider, useApplePay} from '@stripe/stripe-react-native';
    const { presentApplePay, confirmApplePayPayment } = useApplePay();
   
export default class App (){
    handlePayPress = async () => {
          
        const {error, paymentMethod} = await presentApplePay({
          cartItems: [
            {
              label: 'payment label',
              amount: '50', // amount as string
              type: 'final',
            },
          ],
          country: 'US', // enter any country code supported by stripe,
          currency: 'USD', // enter any currency supported by stripe,
        });
        if (error) {
          Alert.alert(error.code, error.message);
        } else {
          const {error: confirmApplePayError} = await confirmApplePayPayment(
            clientSecret,
          );
          confirmApplePayPayment(clientSecret);
          if (confirmApplePayError) {
            Alert.alert(confirmApplePayError.code, confirmApplePayError.message);
          } else {
            Alert.alert('Success', 'The payment was confirmed      successfully!');
          }
        }
      };
...
...
}

Answers

Hooks must always be called inside functional components. Code refactor for reference.

import { StripeProvider, useApplePay } from "@stripe/stripe-react-native";

export default function App() {
  const { presentApplePay, confirmApplePayPayment } = useApplePay();
  const handlePayPress = async () => {
    const { error, paymentMethod } = await presentApplePay({
      cartItems: [
        {
          label: "payment label",
          amount: "50", // amount as string
          type: "final",
        },
      ],
      country: "US", // enter any country code supported by stripe,
      currency: "USD", // enter any currency supported by stripe,
    });
    if (error) {
      Alert.alert(error.code, error.message);
    } else {
      const { error: confirmApplePayError } = await confirmApplePayPayment(
        clientSecret
      );
      confirmApplePayPayment(clientSecret);
      if (confirmApplePayError) {
        Alert.alert(confirmApplePayError.code, confirmApplePayError.message);
      } else {
        Alert.alert("Success", "The payment was confirmed      successfully!");
      }
    }
  };

  // Return UI Views below
  return null;
}

You can create a seperate functional component for that and call in your class component like this

export default class App (){
    render() {
        return(
            <ApplePayFunction data={'your data here'}/>
        );
    }
}
export default function ApplePayFunction(props) {
  const { presentApplePay, confirmApplePayPayment } = useApplePay();
  const handlePayPress = async () => {
    const { error, paymentMethod } = await presentApplePay({
      cartItems: [
        {
          label: "payment label",
          amount: "50", // amount as string
          type: "final",
        },
      ],
      country: "US", // enter any country code supported by stripe,
      currency: "USD", // enter any currency supported by stripe,
    });
    if (error) {
      Alert.alert(error.code, error.message);
    } else {
      const { error: confirmApplePayError } = await confirmApplePayPayment(
        clientSecret
      );
      confirmApplePayPayment(clientSecret);
      if (confirmApplePayError) {
        Alert.alert(confirmApplePayError.code, confirmApplePayError.message);
      } else {
        Alert.alert("Success", "The payment was confirmed      successfully!");
      }
    }
  };

  // Return UI Views below
  return null;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Apple Pay using @stripe/stripe-react-native is not working showing some hook call error – React native

Answers