Stripe redirectToCheckout 在带有 firebase 条纹扩展的 React 中不起作用..！有什么建议么？

问题描述

我正在使用 firebase 条带扩展“使用条带运行订阅”。在此扩展集成中，我无法重定向结帐页面（redirecttocheckout 功能不起作用）..任何想法我该怎么做？？？

这是我的 Stripe webhooks 事件：

customer.subscription.updated
customer.subscription.deleted
customer.subscription.created
checkout.session.completed
price.updated
price.deleted
price.created
product.updated
product.deleted
product.created

这是我的第一个屏幕代码，用户在其中创建...！

import firebase from 'firebase';
// import getStripe from './stripe';
import { loadStripe } from '@stripe/stripe-js/pure';
import '@stripe/stripe-js';
import redirecttocheckout from '@stripe/stripe-js';


const firestore = firebase.firestore();

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
       console.log(user.uid)        
      // User logged in already or has just logged in.
    } else {
      // User not logged in or has just logged out.
    }
  });




export async function createCheckoutSession(){
  

    let uid = "static uid";
    const checkoutSessionRef =  await firestore.collection('stripe').doc(uid).collection('checkout_sessions').add(
        
        {price : 'price id',success_url : 'https://localhost:3000/success',cancel_url: 'https://localhost:3000/fail',});

    checkoutSessionRef.onSnapshot(async (snap) => {
        const {error,sessionId} = snap.data();
        if (error) {
          // Show an error to your customer and 
          // inspect your Cloud Function logs in the Firebase console.
          alert(`An error occured: ${error.message}`);
        }
        if (sessionId) {
             const stripe =  await loadStripe('pk_test_1234');
             stripe.redirecttocheckout({ sessionId });
        }
    });
}

解决方法

我正在使用相同的代码并且运行良好。我在这里看到的唯一区别可能是您的问题的原因是您正在从 loadStripe 导入 @stripe/stripe-js/pure 这可能需要来自 "@stripe/stripe-js" 而我认为您不需要任何其他条带导入，例如，您的导入应该像

import firebase from 'firebase';
import { loadStripe } from '@stripe/stripe-js';

我有这些导入并且它们运行良好