Loading Stripe Payment Element

App Building
1

I am trying to build a custom module that would load the Stripe Payment Element.

I've added Stripe as a resource, so I can easily run a query to the POST /v1/setup_intents endpoint and get a client secret back from the Stripe API. But the next stage would be for me to call the Stripe.js library (which I added to the module's libraries) - specifically the stripe.elements() function. I have an HTML element in my module with id "payment-element".

I added the Stripe JS library to the module's settings page, and added the following code to the "Preloaded JS" section:
window.stripe = Stripe('pk_test_51J3jxxxx')

I added the following code in the "Transform results" for the resource:

window.clientSecret = data.client_secret;
return data

I added the following code in the "Success" event handlers for the resource:

const clientSecret = window.clientSecret;
const options = { layout: "tabs" };
const appearance = { theme: "stripe" };
const elements = window.stripe.elements({ appearance, clientSecret });
const pe = elements.create("payment", options);
pe.mount("#payment-element");

The code fails when I reload the preview:
Access to XMLHttpRequest at 'https://m.stripe.com/6' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://m.stripe.network' that is not equal to the supplied origin.

I also tried instantiating the stripe variable directly int eh event handler, but I get a similar CORS failure.

Any idea?

2

Pinging on this - has anyone run into these CORS issues in custom modules? TIA!

3

Hey @Benjamin_Nuttin, thanks for reaching out in the forums! I have a couple of questions here. When you say you are adding the transformer and success event handler to the resource are you referring to the same resource query? Could you share some screenshots of your setup with any sensitive info redacted?

Could you also share some screenshots of the properties for your custom component? Since all JS in Retool is sandboxed this may be the issue, but just in case could you try toggling on Storage and Cookies for the component to see if the issue persists?