I'm trying to use Stripejs for react for make payments in content script in Chrome Extension. I'm still getting error : Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin ('https://www.*****.com'). Im my main content script component i have:
let stripePromise;
...
componentDidMount() {
stripePromise = loadStripe('pk_test_CGTRvaOpa53ZQlUXYikMtf0r001D8XRnHQ');
}
...
<Col>
<Elements stripe={stripePromise}>
<CheckoutForm/>
</Elements>
</Col>
And in CheckoutForm i have:
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>
);
};
I have empty div with card:
The extension is implemented by webpack, babel and gulp tasks in latest versions.
I'm added:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://js.stripe.com/v3/";
document.head.appendChild(script);
In webpack index.js file of this component but this didn't help.
What I'm doing wrong?