Интеграция приложения Fable / Elmish с Stripe checkout - PullRequest
Новая
       36

Интеграция приложения Fable / Elmish с Stripe checkout

1 голос
/ 09 марта 2019

Редактировать : Кто-то из gitter предложил это:

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

... поэтому я пытаюсь это сделать и сообщу здесь.

Я создаю приложение Fable / Elmish, которое будет принимать платежи через API Stripe 'Checkout' (https://stripe.com/docs/checkout/aspnet). Stripe требует, чтобы вы получали скрипт checkout.js по требованию (т.е. не черезУзел). При размещении в элементе form и предоставлении нескольких значений с помощью атрибутов data- скрипт добавляет кнопку оплаты на вашу страницу. Например, вот рабочее представление .cshtml из приложения ASP dotnet:

@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>

Я пытаюсь сделать эквивалент в моем приложении Elmish, которое, я думаю, сводится к следующему: 

    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
                     ]
            ]

При визуализации это выглядит так на клиенте: 

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

... но кнопка не была создана, что говорит мне о том, что скрипт не запущен или что он не нашел форму для вставки кнопки. Элемент script действительно появляетсяв форме на отображаемой странице: 

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

Я не вижу ошибок браузера oНа консоли Chrome, кроме ошибок сокетов, которые обычно возникают.(Я поддерживал сценарий извлечения и без него, и в каждом случае были две одинаковые ошибки.)

Если я поместил сценарий и форму в моем Index.html со встроенными значениями, кнопкапоявляется, хотя, очевидно, не в нужном месте.

Что мне не хватает?Есть ли что-то в приложении Elmish, которое останавливает выполнение внешних скриптов?

Большое спасибо!

...