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

Question

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

1. 当用户想要进行结帐时，我会为 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');
}

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

2. 附加数据写入后，我想导航到结帐页面，然后在 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 函数结束后再进行下一步。现在，如果我在写入初始数据后导航到结帐屏幕并尝试读取临时密钥、条带化客户密钥和付款意图，它们是未定义的。

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

Answer 1

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

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