Integrate Stripe Checkout with R Shiny App

Question

[cross post with the R shiny Google group - I waited 24 hours]

The following code will render the checkout button from Stripe normally if I simply save it as a .html and open it with Firefox:

<h1> this is a test </h1>
<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

but placing it in a R Shiny app like so:

output$StripeCheckOut <- renderUI({
  div(class="span6", 
     div(HTML('
                <h1> this is a test </h1>
                <form action="" method="POST">
                  <script
                   src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                   data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg"
                   data-amount="2000"
                   data-name="Demo Site"
                   data-description="2 widgets ($20.00)"
                   data-image="/128x128.png">
                 </script>
               </form>
            ')))

will result in a blank field under the This is a Test text.

It seems that R Shiny is not allowing the Javascript to dynamically load the button after the page has been rendered by the dom.

How can I include the basic Stripe Checkout button in an R Shiny App?

Answer 1

If I include:

 HTML('
        <h1> this is a test </h1>
        <form action="" method="POST">
          <script
           src="https://checkout.stripe.com/checkout.js" class="stripe-button"
           data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg"
           data-amount="2000"
           data-name="Demo Site"
           data-description="2 widgets ($20.00)"
           data-image="/128x128.png">
          </script>
        </form>
       ')

inside ui.r directly, it works - but placing it inside a conditional panel will not allow the Stripe JS to load.

Instead, I used an html data-display-if condition:

<div align="center" data-display-if="output.Unpaid==True">
...
</div>

and everything worked!

This is also nice because it allows you to bind the condition to a Shiny output object vs input object which can be easier at times to work with.

---

Update after further testing

It turns out my edits don't quite work; after the Stripe Checkout JS has loaded, it blocks my Shiny App from interacting with other JS elements on the page.

It seems like there is some conflict with the Stripe JS and the internal Shiny JS....

---

New Update

The newest version of Shiny (0.9.1) has fixed this problem. It seems to have been something with js heads and singletons, which have been updated in the most recent release.

This is no longer an issue, and you can now use Stripe directly in shiny.

Answer 2

Ok, that didn't work in a comment either (bad luck with code in comments this week). Did you try wrapping it in an explicit tags$script call?

tags$script(src="https://checkout.stripe.com/checkout.js", 
            class="stripe-button", 
            "data-key"="pk_test_qdunoptxl9KNXR5qk7WdtkVg",
            "data-amount"="2000",
            "data-name"="Demo Site",
            "data-description"="2 widgets ($20.00)",
            "data-image"="/128x128.png")

it might be advantageous to build the whole form that way to see if it helps.