Access Stripe Javascript

Anvil Q&A
1

Anvil includes Stripe functionality, so I’m assuming it also includes the Stripe Javascript on the client side.

I’m trying to access the Stripe Javascript directly, though, and getting the message that Stripe is not defined.

My case is that I’m trying to redirect the user to an abandoned Stripe Checkout session from within an Anvil form.

Edit: I do have the Stripe service added to the Anvil app, but have not connected the Stripe service to my Stripe account (since all I need is the Javascript available).

2

Hi @jshaffstall,

You’re right that the Stripe client is included in the front-end code of your Anvil app. In particular, we load https://checkout.stripe.com/checkout.js. This defines at least StripeButton and StripeCheckout, which work when I try them. Are you seeing something different?

3

I’m trying to access stripe.redirectToCheckout to send them to the Stripe hosted checkout page to complete their payment.

That requires creating a Stripe object hooked to my public key, e.g.

stripe = Stripe('pk_???');

I’m getting the error that Stripe doesn’t exist.

4

Hi @jshaffstall,

For the redirectToCheckout you will need to include the latest version of the Stripe SDK. You can do this by adding it to your app’s Native Libraries.

From Stripe’s documentation:
<script src="https://js.stripe.com/v3/"></script>

I hope that helps.

2 Likes
5

Hi @jshaffstall. Were you able to access stripe.redirectToCheckout on the client side?

I am able to successfully get a sessionId from Stripe’s servers (through a server call), but I can’t seem to access stripe.redirectToCheckout on the client side to use Stripe’s new built-in Checkout page.

I’ve added
<script src="https://js.stripe.com/v3/"></script>
to my Native Library in Anvil.

and this is the relevant code I have in Anvil:

stripe = Stripe('pk_test_xxxxxx') # my stripe publishable key
self.call_js('stripe.redirectToCheckout', { "sessionId": session_id })

(I successfully got the session_id from Stripe from a server call)

but I get an error that stripe/Stripe and redirectToCheckout is not found or or is not defined or doesn’t exist.

Were you able to figure out how to access Stripe’s redirectToCheckout on the client side?

6

Right after writing my message above, I changed my code to this:

self.call_js('Stripe("pk_test_xxxxxxxxxxx").redirectToCheckout', { "sessionId": session_id })

and it worked ok. Is this what you ended up doing or did you have a better solution?

I’ll keep working at it, but at least this code calls the Stripe Checkout page!

7

I have a static site that serves as my storefront, so I didn’t need to call redirectToCheckout from an Anvil app. Glad you got it working!