React Native firebase 處理支付流程

Question

我正在集成支付 api，我使用 firebase 雲功能作為我的后端和 react-native 在前端，所以現在我有以下代碼：

在 react-native 側：

const PaymentScreen = () => {
  setLoading(true);
  const onPay = () => {
    const onPaymentCall = firebase.functions().httpsCallable('onPayment');
    onPaymentCall(productsData)
    .then(res => {
      setLoading(false);
      if (res?.data?.statusCode === 200) {
        const paymentReceivedData = {
          transactionId: res?.data?.transactionId,
          paymentDate: new Date().now(),
          totalPrice: res?.data?.totalPrice
        }
        navigator.navigate('ReceiptScreen', { paymentReceivedData });
      }
    })
  }
  return (
    <TouchableOpacity onPress={onPay}>PAY</TouchableOpacity>
  )
}

firebase function 處理付款：

export const onPayment = functions
    .runWith({ timeoutSeconds: 300 })
    .https.onCall(async (data: any, context: any) => {
      if (!context.auth) {
            throw new functions.https.HttpsError(
                'failed-precondition',
                'The function must be called while authenticated.'
            );
        }
      try {
        const paymentResult = await paymentThroughApi(data);
        await admin.firestore().collection('wallet').add({...paymentResult});
        const response = {
          statusCode: 200,
          totalPrice: paymentResult.totalPrice,
          transactionId: paymentResult.transactionId,
        }
        return response;
      } catch (error) {
        const response = {
          statusCode: 400,
          message: 'Payment unsuccessful',
          transactionId: null,
        }
        return response;
      }

所以問題是，如何在 react-native 端處理long-time response / timeout error / network-loss等，比如我應該如何使它更健壯？ 尤其是處理長時間響應、超時錯誤、支付失敗等？ 我應該使用哪些軟件包？ 像NetInfo一樣檢查互聯網連接，但使支付流程穩健的最佳方法是什么？

那么任何人都可以指導我或建議任何代碼片段以添加到我當前的代碼中嗎？

謝謝

Answer 1

我認為您的問題沒有一個明確的答案，但這是我的想法：

要在 React Native 中管理網絡連接狀態，您可以使用NetInfo獲取有關網絡連接的信息，並使用Axios根據文檔向公共 API 發出網絡請求，並使用此 Stackoverflow 鏈接查看更多信息。

對於timeout errors ，您可以查看Dan Abromov 的文章，其中說明使用 React Hooks 和此鏈接使 setInterval 聲明式

react-native中long-time responses有不同的答案。