2

编辑： gitter 上有人建议这样做：

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

...所以我正在尝试并会在这里报告。

我正在创建一个 Fable/Elmish 应用程序，它将通过 Stripe 'Checkout' api ( https://stripe.com/docs/checkout/aspnet ) 进行付款。Stripe 要求您checkout.js按需获取脚本（即不通过 Node）。当放置在一个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>

除了通常遇到的套接字错误外，我在 Chrome 控制台上看不到任何浏览器错误。（我在有和没有结帐脚本的情况下都支持过，每种情况下都有两个相同的错误。）

如果我将脚本和表单放在我Index.html的硬连线值中，按钮确实会出现，但显然不在正确的位置。

我错过了什么？在 Elmish 应用程序中是否存在阻止执行外部脚本的内容？

非常感谢！

4

0 回答 0