Firebase + stripe + react native 通知客户端 firebase 功能已完成

Posted 2023-02-16

【中文标题】Firebase + stripe + react native 通知客户端 firebase 功能已完成

【英文标题】：Firebase + stripe + react native informing the client that the firebase function has finished

【发布时间】：2022-01-20 12:09:56

【问题描述】：

我正在为 react native 实现一个带有 Stripe 扩展的支付系统。但是，我不知道在以下情况下如何表现：

当用户想要进行结帐时，我会为 checkout_session 编写初始信息：

    const initializeCheckout = () => 

        //write initial payment data
        const writePaymentDetails = async () => 
            await setDoc(doc(getFirestore(), 'customers', getAuth().currentUser.uid, 'checkout_sessions', getAuth().currentUser.uid),
                client: 'mobile',
                mode: 'payment',
                amount: subTotal,
                currency: 'chf',
            );
        
        writePaymentDetails();
        navigation.navigate('Checkout');

之后，firebase 中的条带扩展将所有附加信息（临时密钥、条带客户密钥等）添加到 checkout_session 文档中。

附加数据写入后，我想导航到结帐页面，然后在 react native 中初始化并打开 paymentSheet，因为它是 indicated in the official stripe tutorial

我实现的结帐屏幕：

export default function CheckoutScreen() 

    const  initPaymentSheet, presentPaymentSheet  = useStripe();
    const [loading, setLoading] = useState(false);
  
    const fetchPaymentSheetParams = async () => 

        console.log('still works after calling fetchPaymentSheetParams');

        const checkoutSessionDoc = await getDoc(doc(getFirestore(), 'customers', getAuth().currentUser.uid, 'checkout_sessions', getAuth().currentUser.uid));
        const paymentIntent = checkoutSessionDoc.data().paymentIntentClientSecret;
        const ephemeralKey = checkoutSessionDoc.data().ephemeralKeySecret;
        const customer = checkoutSessionDoc.data().customer;

        console.log(paymentIntent, ephemeralKey, customer);
    
        return
            paymentIntent: paymentIntent,
            ephemeralKey,
            customer,
        ;
    ;
  
    const initializePaymentSheet = async () => 
        const 
            paymentIntent,
            ephemeralKey,
            customer,
         = await fetchPaymentSheetParams();
    
        const  error  = await initPaymentSheet(
            customerId: customer,
            customerEphemeralKeySecret: ephemeralKey,
            paymentIntentClientSecret: paymentIntent,
            allowsDelayedPaymentMethods: false,
        );

        if (!error) 
            setLoading(true);
        
    ;
  
    const openPaymentSheet = async () => 
        const  error  = await presentPaymentSheet();

        if (error) 
            Alert.alert(`Error code: $error.code`, error.message);
         else 
            Alert.alert('Success', 'Your order is confirmed!');
        
  ;
  
    useEffect(() => 
        console.log('Payment sheet is being initialized');
        initializePaymentSheet();
    , []);
  
    return (
        <View style=flex: 1, justifyContent: 'center'>
            <Button
                disabled=loading
                title="Checkout"
                onPress=openPaymentSheet
            />
        </View>
        
    );
  

但是，我不知道如何等到第 2 步中的 firebase 函数结束后再进行下一步。现在，如果我在写入初始数据后导航到结帐屏幕并尝试读取临时密钥、条带化客户密钥和付款意图，它们是未定义的。

那么，我的问题是如何正确地进行转换，以使附加信息不会未定义？

【参考方案1】：

我已经以一种麻烦（很可能）的方式解决了这个问题：

我已经定义了一个快照监听器，它检查是否定义了字段 customer、customerEphemeralKeySecret 和 paymentIntentClientSecret，然后才开始初始化付款表。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。