How to securely access Stripe clientSecret on page load?

[alexcooney5]

Stripe recently released a nice feature where you can embed checkout sessions into your page:

I have two Stripe plugins that are built on Checkout and I’d like to add this feature to them.

It should be fairly straightforward. The user of my plugins will:

1. Create a Checkout Session on one page
2. Navigate to another page where they will add a Checkout Session element
3. Run a workflow action on page load that embeds the Checkout Session on the Checkout Session element

It’s step #3 I’m struggling with. I can’t figure out how to securely access the ‘clientSecret’ value that is associated with each Stripe Checkout Session on page load. This is required to embed the Checkout Session.

You can get the clientSecret from the Stripe Checkout Session object, but I can’t figure out how to dynamically retrieve the Checkout Session details and then use the returned clientSecret value in this action.

Any help would be greatly appreciated!

[dorilama]

the clientSecret should be a property of your element, or your action. In the editor the user of the plugin needs to make a request to stripe, to retrieve the clientSecret and then pass it to the element/action.
It is meant to be used client-side, but you need to follow some basic rules mentioned in the docs:

Don’t log it, embed it in URLs, or expose it to anyone other than the customer. Make sure that you have TLS on any page that includes the client secret.

[alexcooney5]

Thanks @dorilama !

[jeff.chia1995]

Hey Alex,

Can I ask how did you embed the form into your page? I’m looking through the Stripe documentation and didn’t manage to understand how to convert them into Bubble.