0

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:

enter image description here

And in console: enter image description here

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?

1 Answer 1

0

I don't believe Stripe Elements works in a Chrome Extension; you'll need to send the user to an HTTPS payment page for this.

3
  • Have you any other solutions to make payments in chrome extension in content script or in popup?
    – voltdev
    Commented Apr 6, 2020 at 7:20
  • Not that I'm aware of, no. Commented Apr 16, 2020 at 8:38
  • Try to create a page like this: chrome-extension://hjdyfdnfleobejgjajmgkfahnafphfooa/checkout/index.html Commented Sep 15, 2020 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.