Question

我的任务是创建一个Web应用程序，该应用程序会在其他站点上创建弹出窗口，例如Stripe checkout会在结帐文档（https://stripe.com/docs/quickstart）中使用此代码（如下所示）进行操作。我有使用iframe的经验，但没有使用脚本代码。

任何建议或示例代码都可以。

<form action="your-server-side-code" method="POST">   
  <script src="https://checkout.stripe.com/checkout.js" 
          class="stripe-button"     
          data-key="pk_test_g6do5S237ekq10r65BnxO6S0"     
          data-amount="999"     
          data-name="Stripe.com"    
          data-description="Example charge"     
          data-image="https://stripe.com/img/documentation/checkout/marketplace.png"     
          data-locale="auto"    
          data-zip-code="true">  
  </script> 
</form>

Answer 1

要开始使用，请将以下代码添加到您的付款页面，确保该表单提交到您自己的服务器端代码：

<form action="your-server-side-code" method="POST">
 <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
   data-key="pk_test_g6do5S237ekq10r65BnxO6S0"
   data-amount="999"
   data-name="Stripe.com"
   data-description="Example charge"
   data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
   data-locale="auto"
   data-zip-code="true">
 </script>
</form>

Answer 2

您正在加载的基本上是javascript。这是您正在加载的脚本：https://checkout.stripe.com/checkout.js。

此脚本创建一个称为“模态”的弹出窗口。

这是W3Schools的教程：https://www.w3schools.com/howto/howto_css_modals.asp

这应该足以让您入门。

如何创建像Stripe Checkout这样的弹出窗口

2 个答案: