Я пытаюсь использовать Stripe js для реакции на совершение платежей в скрипте контента в Chrome Расширение. Я все еще получаю сообщение об ошибке: Не удалось выполнить 'postMessage' для 'DOMWindow': предоставленный целевой источник ('https://js.stripe.com') не соответствует источнику окна получателя ('https://www) . *****. ком "). Я мой основной компонент скрипта контента, у меня есть:
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);
В индекс веб-пакета. js Файл этого компонента, но это не помогло.
Что я делаю не так?