Fable/Elmish应用集成Stripe Checkout遇按钮不显示问题求助

你遇到的核心问题是Stripe Checkout的自动初始化时机和Elmish动态DOM渲染的时机不匹配：

当你把带stripe-button类的<script>硬编码到index.html时，checkout.js加载完成后会立刻扫描页面所有符合条件的标签并替换成支付按钮。但在Elmish组件里动态渲染这个脚本标签时，脚本可能已经加载完成，Stripe的初始化逻辑早就执行过了，自然不会处理后续才出现在DOM里的元素。

下面是两种可行的解决方案，推荐第二种更适配Elmish生态的方式：

方案1：强制重新触发Stripe初始化（临时hack） #

如果想保留原有脚本标签的写法，可以在组件渲染完成后手动重新加载脚本，触发Stripe的扫描逻辑：

open Fable.Core.JsInterop
open Fable.React
open Fable.React.Props

let view (model : Model) (dispatch : Msg -> unit) =
    let reinitStripe () =
        // 移除已加载的脚本，重新添加以触发初始化
        let existingScript = document.querySelector("script[src='//checkout.stripe.com/v2/checkout.js']")
        if existingScript <> null then existingScript.parentNode.removeChild(existingScript)
        
        let newScript = document.createElement("script")
        newScript.setAttribute("src", "//checkout.stripe.com/v2/checkout.js")
        newScript.setAttribute("class", "stripe-button")
        document.body.appendChild(newScript)

    div []
        [ Text "This is the payment area"
          form [ Action "/Home/Charge" Method "POST" ]
              [ article [] [ label [] [ Text "Amount £9.99" ] ]
                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) ]
                    [] ]
          // Elmish中可通过Cmd在update阶段触发reinitStripe
        ]

⚠️ 注意：这种方式比较hacky，重复加载脚本可能引发未知副作用，仅作为临时方案使用。

方案2：使用Stripe Checkout手动初始化API（推荐） #

Stripe提供了手动调用的API，完全不需要依赖自动扫描逻辑，更适合动态渲染场景：

步骤1：提前加载checkout.js #

在index.html的<body>末尾添加脚本：

<script src="//checkout.stripe.com/v2/checkout.js"></script>

步骤2：在Elmish组件中手动实现支付按钮 #

用普通按钮替代自动生成的按钮，点击时调用Stripe API，支付成功后提交表单到后端：

open Fable.Core.JsInterop
open Fable.React
open Fable.React.Props

// 定义Stripe配置类型（增强类型提示）
type StripeCheckoutOptions = {
    key: string
    locale: string
    description: string
    amount: int
    billingAddress: bool
    token: (obj -> unit) // 支付成功回调，接收token对象
}

// 封装Stripe Checkout调用
let openStripeCheckout (options: StripeCheckoutOptions) =
    let stripeCheckout = jsNative<obj>
    stripeCheckout.configure(options)
    stripeCheckout.open()

let view (model : Model) (dispatch : Msg -> unit) =
    // 支付成功后：将token加入表单并提交
    let handleStripeToken (token: obj) =
        let form = document.querySelector("form[action='/Home/Charge']")
        // 添加隐藏字段传token给后端
        let tokenInput = document.createElement("input")
        tokenInput.setAttribute("type", "hidden")
        tokenInput.setAttribute("name", "stripeToken")
        tokenInput.setAttribute("value", token?id)
        form.appendChild(tokenInput)
        form.submit()

    let handlePayClick _ =
        let options = {
            key = "pk_test_REDACTED" // 建议从model中读取配置
            locale = "auto"
            description = "Sample charge"
            amount = 999
            billingAddress = true
            token = handleStripeToken
        }
        openStripeCheckout options

    div []
        [ Text "This is the payment area"
          form [ Action "/Home/Charge" Method "POST" ]
              [ article [] [ label [] [ Text "Amount £9.99" ] ]
                button [ OnClick handlePayClick; Class "stripe-button" ] // 复用Stripe样式
                    [ Text "Pay £9.99" ] ] ]

方案优势 #

• 完全控制按钮渲染和触发时机，适配Elmish动态DOM更新
• 避免依赖Stripe自动扫描的时机问题
• 可灵活扩展支付成功后的逻辑（如添加额外字段、显示加载状态）

另外，Gitter上提到的Stripe Elements确实是Stripe推荐的新一代支付集成方案，API设计更适配React/Fable这类框架，如果有时间可以考虑迁移，但上述方案已能解决你当前的Checkout API问题。

内容的提问来源于stack exchange，提问作者Kit