在Chrome扩展失败中使用Stripe.JS React

Question

我正在尝试使用Stripejs在Chrome扩展程序的内容脚本中进行付款。我仍然遇到错误：无法在“ DOMWindow”上执行“ postMessage”：提供的目标原点（'https://js.stripe.com'）与收件人窗口的原点（'https://www。*****。com' ）。我的主要内容脚本组件是：

let stripePromise; 
...
componentDidMount() {
    stripePromise = loadStripe('pk_test_CGTRvaOpa53ZQlUXYikMtf0r001D8XRnHQ');
  }
...

<Col>
 <Elements stripe={stripePromise}>
  <CheckoutForm/>
 </Elements>
</Col>

并且在CheckoutForm中，我有：

export const CheckoutForm = () => {
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async (event) => {
        event.preventDefault();
        if (!stripe || !elements) {
            return;
        }

        const cardElement = elements.getElement(CardElement);

        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: 'card',
            card: cardElement,
        });

        if (error) {
            console.log('[error]', error);
        } else {
            console.log('[PaymentMethod]', paymentMethod);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <CardElement />
            <button type="submit" disabled={!stripe}>
                Pay
      </button>
        </form>
    );
};

我的卡上有空的div：

并且在控制台中：

此扩展由最新版本的webpack，babel和gulp任务实现。

我被添加：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://js.stripe.com/v3/";
document.head.appendChild(script);

在此组件的webpack index.js文件中，但这没有帮助。

我做错了什么？

Answer 1

我不认为Stripe Elements可在Chrome扩展程序中使用；您需要为此将用户发送到HTTPS付款页面。