I understand that Wix does not easily support stripe in the front-end; adding the prerequisite script tags to HTML header doesn’t seem to work for me, and most of the custom implementations in this thread (https://www.wix. com/corvid/forum/community-discussion/wix-code-stripe?origin=auto_suggest) make use of iFrames. However, with the relatively recent introduction of the ability to install node modules, I am hoping it’s a different story.
My Objective: to integrate Stripe Checkout for Stripe Connect (according to https://stripe. com/docs/payments/checkout/connect). To trigger the Checkout Session when the user clicks the RSVP button.
What I’ve done:
-
I’ve installed the ES module “@stripe/stripe-js” under node_modules.
-
I’ve successfully created a Checkout Session ID in the backend and call it from my page code (see below), ready to redirect the user to the Checkout.
My problem:
-
My loadStripe command is returning null.
-
The README for the ES Module (https://github. com/stripe/stripe-js) states that " If you call loadStripe in a server environment it will resolve to null ." - I am hoping this is the problem.
-
I can’t, for the life of me, get any result other than null.
My code:
Page
import wixData from 'wix-data';
import {createSession} from 'backend/stripeProxy.jsw';
import {loadStripe} from '@stripe/stripe-js';
$w.onReady(function () {
$w('#RSVPButton').enable();
});
export async function RSVP_click(event) {
console.log("RSVP button clicked...");
// Tell user that something is happening
$w('#RSVPButton').label = "Please wait...";
// Disable input and button fields
$w('#inputName').disable();
$w('#inputTitle').disable();
$w('#RSVPButton').disable();
// Configure Stripe with public key and connect account.
console.log("Configuring Stripe...");
const stripe = await loadStripe('pk_test_XXX', {
stripeAccount: 'acct_XXX'
});
console.log("await loadStripe returns: " + stripe);
createSession().then(session_id => {
console.log("Redirecting to checkout...");
stripe.redirectToCheckout({
// Instructions from Stripe: Make the id field from the Checkout Session creation API response
// available to this file, so you can provide it as argument here
// instead of the {{CHECKOUT_SESSION_ID}} placeholder.
sessionId: session_id
}).then(function (result) {
// Instructions from Stripe: If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
console.error(result.error.message);
$w('#redirectReport').text = result.error.message;
});
});
}
When the RSVP button is clicked in Preview Mode, it prints…
RSVP button clicked...
Configuring Stripe...
await loadStripe returns: null
Redirecting to checkout...
… and then nothing happens. 
I will bow in awe to anyone who can help me make this work.