Question

编辑：有些人建议这样做：

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

...所以我正在尝试，并将在此处报告。

我正在创建一个寓言/ Elmish应用程序，它将通过Stripe'Checkout'API（https://stripe.com/docs/checkout/aspnet）进行付款。 Stripe要求您按需获取checkout.js脚本（即，不通过Node）。当放置在form元素中并通过data-属性提供一些值时，脚本将向您的页面添加一个付款按钮。例如，这是来自ASP dotnet应用程序的.cshtml工作视图：

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

...但是尚未创建按钮，这向我提示脚本尚未运行，或者未找到用于插入按钮的表单。脚本元素确实出现在呈现页面的表单内：

<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控制台上看不到任何浏览器错误。（无论是否有checkout脚本，我都是背靠背的，每种情况下都有两个相同的错误。）

如果我将脚本和表单放置在具有硬连线值的Index.html内，则按钮会出现，尽管显然不在正确的位置。

我想念什么？在Elmish应用程序中是否存在某些可以阻止外部脚本执行的东西？

非常感谢！

将寓言/ Elmish应用程序与Stripe Checkout集成

0 个答案: