Redirection issues when using an iFrame to automatically redirect the user

Ask the community
1

Fancy new category! cuts ribbons

So I have been working on this Stripe integration for a while, specifically Stripe Checkout for 3D secure transactions.

For this you need to Create a Session using either Wix Fetch or NPM (your choice) and then Stripe returns you a Session ID which you need to use in order to redirect the customer to Stripe in order to complete the transaction.

Once transaction is complete Stripe will send a webhook and you can fulfill the order on the backend (not gonna get into details for this)

Everything works well except for one little nugget. We need to use Stripe.js for the redirection and from what I can see we will need to use an iFrame because: https://stripe.com/docs/js/including

iFrame code looks like below

<html>
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('pk_test_xxxxxxxxxxxx');
    window.onmessage = (event) => {
    if (event.data) {
         let jackpotId = event.data.id;
         stripe.redirectToCheckout({
             sessionId: jackpotId
         })
         .then( function (result) {
            let data = result;
            window.parent.postMessage(data, "yolo");
       });
    }
}
</script>
</html>

After I get the Session ID from Stripe I post it to the HTML component and as you can see above the redirectToCheckout() runs.

Problem: However in many cases the redirect is blocked by the browser, only if the site has been given permissions for redirect then it is allowed + a few rare cases too. Majority of the time the redirect is blocked

708×160 8.63 KB

Question: Now that Wix has made the stripe.js npm available do you think we can use the redirectToCheckout() directly without the iFrame?

Stripe.js module: GitHub - stripe/stripe-js: Loading wrapper for Stripe.js

I tried something like below on the page code:

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

const stripe = loadStripe('pk_test_xxxxxxxx');

function responder(response) {
   return stripe.redirectToCheckout({
      sessionId: response.id
   })
   .then( function(err, result) {
      if(err) {
         console.log(err);
         return Promise.resolve(err);
      }
         console.log(result);
         return Promise.resolve(result);
   })
   .catch( (err) => {
         console.log(err);
         return err;
   });
}

But this returns something like “redirectToCheckout does not exist”

2

Have you check the version of @stripe/stripe-js in the module manager? Maybe that’s an old version where the API is not available.

That being said, Corvid does not have access to the main javascript environment. We don’t have access to window object thus the code in your module won’t be able to use window.location . This is purely a guess, I might be wrong.

3

You are right. Found a solution to this a while back.

Basically redirect to a webpage hosted on an external platform with the session id and public api key in the url parameter then have the external webpage retrieve them and run the redirectToCheckout() function.