Redirecting to Stripe Checkout Page

Ask the community
,
1

Hi, I’m trying to use Stripe’s redirectToCheckout (h t t p s://stripe.com/docs/js/checkout/redirect_to_ checkout) to redirect from my Wix Page to Stripe’s Checkout. Since there is no way to “include” Stripe.js in Wix, I used HTML iFrame with the following code:

<script src="https://js.stripe.com/v3/"></script>

<script>
        window.onmessage = (event) => {
 
 if (event.data.startsWith('cs_')) {

 var stripe = Stripe('pk_test_XXXXXXXX'); //test with your own Public Key
 
            stripe.redirectToCheckout({
 // Make the id field from the Checkout Session creation API response
 // available to this file, so you can provide it as parameter here
 // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
              sessionId: event.data
            }).then(function (result) {
 // If `redirectToCheckout` fails due to a browser or network
 // error, display the localized error message to your customer
 // using `result.error.message`.
              window.parent.postMessage(result, "*");
            });
        }
      };
</script>

And the following is the function that sends Session ID (a string) into the HTML iFrame when the button “Checkout” is clicked.

export function btnCheckout_click(event) {
    createCheckoutSession(createProductList())
    .then((checkoutSession) => {
 if (checkoutSession.id !== undefined) {
            $w('#hiddenHtml').postMessage(checkoutSession.id);
        } else {
            console.log('Checkout Session Error');
        }
    });
}

On a desktop computer, the redirecting works but I can’t get it to work with mobile devices. Is anyone facing the same issue? Or am I missing something with the HTML iFrame’s code?

Any suggestions will be very much appreciated! Thanks!

2

This forum is dedicated to Corvid and and can’t provide support for HTML scripts.

A more secure way to handle web service requests is by using backend (server-side) code. Using backend code you can secure your passwords, API keys, and other secret information. The article Accessing 3rd Party Services explains how this is done. I recommend checking with the service provider to see if they provide a REST interface.

See this example:
Stripe Payment Processing
Integrate the Stripe Payment processing system into a site. Three levels of user access are demonstrated: visitor, freemium (registered), and premium (paid).

3

In addition to what the Brewmaster suggested:

The redirection issue is actually an issue with the browser since you are using an iFrame. The iFrame initiates the redirect and sometimes (based on the browser) the redirect will be blocked, nothing you can do to overcome that.

The solution here will be that a destination URL is returned by Stripe in the API response (just like PayPal returns a URL to redirect the customer to when you use their API)

This is something they need to implement on their side and previously I have talked to them about it but it seems an immediate solution is not on the horizon.

1567×320 9.98 KB

4

Hi Yisrael, thank you for clarifying. I have tried using the example and I understand that it uses Stripe’s Charges API but there is no 3D Secure feature.

Actually I have tested and also successfully received payments with Payment Intents API and 3D Secure works. However, the Payment Intents API is designed to work with Stripe.js’ Element Object (h t t p s://stripe. com/docs/js/elements_object) and since there is no HTML “include” in Wix Page (other than using iFrame), I had no choice but to receive payments via Payment Intent API directly without using Elements.

As a result, I would need to submit SAQ D annually to prove that my business is PCI compliant, although I do no store any Card details. I’m trying to avoid this because SAQ D is the most onerous of all the SAQs, with over 40 pages of requirements I must implement to remain PCI compliant. In addition, I believe that your method of using the Charges API falls under the same category of “API Direct” to receive payment, so SAQ D submission would be inevitable as well.

This is Stripe Integration Security: h t t p s://stripe. com/docs/security#validating-pci-compliance

5

Yes I agree. Would be great is Stripe API can just return a URL. Really hope that they will implement it soon. In reference to my reply to Yisrael, do you think that any use of Stripe API to receive payment in Wix (since we can’t rally use Element and Checkout) mean that we have to submit SAQ annually because we have no choice but to use API directly?

6

I actually found a way to make this work, what I’ve done is deploy a simple page (hosted for free on firebase) that would redirect to checkout using the session ID.

This is the entire flow :

Wix Frontend (the checkout is triggered by the click of a “subscribe” button)


const stripeApiKey  = "pk_test_1234"

export async function subscribeBtn_click(event) {
 let checkoutSession = await 
  getCheckoutSession(userData.customerID)
 
 if (checkoutSession.id !== undefined) {
        wix Location .to("your redirect link")
    } else {
        console.log('Checkout Session Error');
    }
 
}

Wix Backend :

export async function getCheckoutSession(customerID) {
 const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [{
            price: 'plan_G6s0UB8YiPvOoZ',
            quantity: 1,
        }],
        mode: 'subscription',
        success_url: 'your success',
        cancel_url: 'your cancel',
        customer: customerID
    });
 return session;
}

Redirect Page’s JS (hosted on Firebase):

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var stripe
 
if (urlParams.has('apiKey')) {
  stripe = Stripe(urlParams.get('apiKey'));
  if (urlParams.has('sessionID')) {
   let stripeSessionID = urlParams.get('sessionID')
   stripe.redirectToCheckout({
    sessionId: stripeSessionID
  }).then(function (result) {
    console.log(result);
  });
}
}else {
  console.log("Failed, reason : No Params");
}
7

Thanks for sharing! That’s an interesting approach to redirect using another page that supports Stripe.js without iFrame. I will try it out!

I have also kind of figured out that redirecting from an iFrame will not be blocked as a pop up, if the button that triggers the redirecting function is created within the iFrame, instead of created from Wix Page. I’m still testing it and hopefully it works on all devices.

8

Hey Boss,
Have you been able to set this up? I need stripe checkout as well though am having issues.

9

Hey Sneaky,
I have been looking all over the forum for Stripe Checkout, and I believe your method is actually what I’m looking for. I found a Wix test website where they also used firebase to re-direct to the checkout. https://www.shop.dudeapi.com/product/Bronte-Blue?rate=EUR

Problem is that I’m a complete noob and just began earning JS for these two weeks. Is there any way you could help me achieve this? I can pay for your time as well.

10

@danyminko Please checkout this post if you are looking to hire developers: https://www.wix.com/corvid/forum/community-discussion/need-a-little-help-with-your-site-hire-a-corvid-web-developer