如何将CSS和HTML元素呈现回客户端'；来自表单POST acction和JavaScript的浏览器？

我正在开发一个允许用户在同行之间付款的网站，我正试图通过JavaScript和HTML表单实现一个简单的机制，模拟Stripe提供的嵌入结账按钮的方法。（请参见下面的签出按钮条纹示例代码）

我对这种方法的问题如下：

为了呈现将CSS和HTML元素嵌入到客户端浏览器中的漂亮按钮，实现了什么逻辑

一旦用户点击按钮，传递消息的逻辑是什么 自定义元素，如价格服务、服务说明等 同样的Javascript也负责CSS和HTML 从问题#1得出的结果？我们是说一个单身汉吗 处理一体机的Javascript文件？或者还有别的事 在引擎盖后面

---

提前感谢您的这篇文章，我只想从专业角度了解我试图复制的内容。

在不了解Stripe的情况下，我可以猜测，当他们的脚本加载时，他们会在DOM中查询具有“类Stripe”按钮的脚本元素

然后，他们可能会添加按钮元素作为该脚本元素的同级元素，并添加所有必要的处理程序

下面是一个简单的例子：

checkout.js

jQuery（函数（$）{
var$script=$（'script.stripe button'），//查找脚本el
//创建按钮
$button=$（''）.addClass（'stripe-button'）.text（$script.data（'text'））；
$script
//在脚本元素后插入按钮
.之后（$按钮）
//收听表单的提交事件
.最近的（'表格'）.提交（功能（e）{
console.log（“执行签出”）；
});
});

HTML

您的示例很有意义，但我有一个问题：如何通过JavasScript传递价格、描述等参数？我有什么遗漏吗？@ChaleCS你想把这些参数传递给什么？按钮的插件？签出服务？如果您看到Stripe中的示例代码，那么他们正在使用data-*属性传递web开发人员提供的参数。我想复制相同的传递参数的方法。@ChaleCS好吧，这已经是我示例的一部分了。如果您注意到我在示例中添加了一个

数据文本

属性来指定按钮的文本。您可以对任何其他自定义属性使用相同的方法。谢谢plalx，您已经完成了：-）

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

jQuery(function ($) {
    var $script = $('script.stripe-button'), //find script el
        //create button
        $button = $('<button type="submit">').addClass('stripe-button').text($script.data('text'));


    $script
      //insert button after the script element
      .after($button)
      //listen to the submit event of the form
      .closest('form').submit(function (e) {
          console.log('performing checkout');
      });
});

<form>
    <script src="checkout.js" class="stripe-button" data-text="Checkout"></script>
</form>