Integrate Stripe Checkout with the R Shiny App

Question

[cross-table with group R of the brilliant Google group - I waited 24 hours]

The following code will display a button checkoutfrom the strip if I just save it as .htmland 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 putting it in an R Shiny application, for example:

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 an empty box below the text This is a Test.

It seems that R Shiny does not allow Javascript to dynamically load the button after the page has been displayed dom.

How to enable the basic “Check Band” button in the 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>
       ')

ui.r, , Stripe JS.

html data-display-if:

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

!

, Shiny output object vs input, .

---

, ; , Stripe Checkout JS, Shiny JS .

, Stripe JS Shiny JS....

---

Shiny (0.9.1) . , - js head singletons, .

, Stripe .

Answer 2

, ( ). tags$script?

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")

, , .