2

Edit: Someone on gitter has suggested this:

https://stripe.com/docs/recipes/elements-react

...so I'm trying that and will report back here.


I'm creating a Fable/Elmish app which will take payments via the Stripe 'Checkout' api (https://stripe.com/docs/checkout/aspnet). Stripe mandates that you get the checkout.js script on demand (i.e. not via Node). When placed within a form element and provided with a few values via data- attributes, the script adds a payment button to your page. For example here is a working .cshtml view from a an ASP dotnet app:

@using Microsoft.Extensions.Options
@inject IOptions<StripeSettings> Stripe

<form action="/Home/Charge" method="POST">
  <article>
    <label>Amount: $5.00</label>
  </article>
  <script src="//checkout.stripe.com/v2/checkout.js"
          class="stripe-button"
          data-key="@Stripe.Value.PublishableKey"
          data-locale="auto"
          data-description="Sample Charge"
          data-amount="500"
          data-billing-address=true>
  </script>
</form>

I am trying to do the equivalent in my Elmish app, which I think boils down to this:

    let view (model : Model) (dispatch : Msg -> unit) =
        let payScript = 
            script 
                [
                    Src "//checkout.stripe.com/v2/checkout.js"
                    Class "stripe-button"
                    Data ("key","pk_test_REDACTED") // Should come from config via the model
                    Data ("locale", "auto")
                    Data ("description", "Sample charge")
                    Data ("amount", "999")
                    Data ("billing-address", true)
                ]        
                []

        div []
            [
                Text "This is the payment area"
                form [ 
                        Action "/Home/Charge"
                        Method "POST"
                     ] 
                     [
                        article [] 
                            [
                                label [] [ Text "Amount £9.99" ]
                            ]
                        payScript
                     ]
            ]

When rendered this appears like this on the client:

This is the payment area
Amount £9.99
* expected button here *

...but the button hasn't been created, which suggests to me that the script hasn't run, or that it hasn't found the form to insert the button. The script element does appear within the form in the rendered page:

<div>This is the payment area>
    <form action="/Home/Charge" method="POST">
        <article><label>Amount £9.99</label></article>
        <script src="//checkout.stripe.com/v2/checkout.js" class="stripe-button" data-key="pk_test_REDACTED" data-locale="auto" data-description="Sample charge" data-amount="999" data-billing-address="true"> 
        </script>
    </form>
</div>

I don't see any browser errors on the Chrome console, other than the socket errors one usually gets. (I've back-to-backed with and without the checkout script and there are two identical errors in each case.)

If I place the script and form within my Index.htmlwith hardwired values, the button does appear, though obviously not in the right place.

What am I missing? Is there something about being within an Elmish app that stops external scripts being executed?

Many thanks!

Kit
  • 2,089
  • 1
  • 11
  • 23

0 Answers0