Question

根据文档，Checkout支持两种不同的集成：简单和自定义。

简单的方法对我有用：

**<form action="create_subscription.php" method="POST">**
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="asdsdfasd3232"
  data-amount="2000"
  data-name=""
  data-description="2 widgets"
  data-image="https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.png"
  data-locale="auto">
</script>
</form>

然而，在自定义方式中，我不理解如何以及在何处我应该调用＆＃34; create_subscription.php＆＃34;脚本。这是自定义集成代码：

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

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'asdsdfasd3232',
  image: 'https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: '',
    description: '2 widgets',
    amount: 2000
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

我已尝试过此代码，但它无效。有人能指出我正确的方向吗？

<form action="/create_subscription.php" method="POST">
      <script src="https://checkout.stripe.com/checkout.js"></script>
      <div id="stripe-demo" class="evo-button rounded cele">
      <span>Register</span>
      </div>

      <script>
      var handler = StripeCheckout.configure({
        key: "asdsdfasd3232",
        image: "img/logo.png",
        name: "",
        description: "Subscription for 1 month",
        panelLabel: "Sign Me Up!",
        amount: "2000",
        allowRememberMe: false
      });

      document.getElementById('stripe-demo').addEventListener('click', function(e) {
        handler.open();
        e.preventDefault();
      });

      window.addEventListener('popstate', function() {
        handler.close();
      });
      </script>
    </form>

Answer 1

感谢Comdenz 这是我使用现有表单解决它并调用我的服务器端代码的方式。

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
 key: "your testing key",
  locale: 'auto',
  image: "image/directory",
  name: "Name",
  description: "your discription",
  panelLabel: "Click to make payment",
  allowRememberMe: false,


  token: function(token) {
    // Prevent user from leaving page
    window.onbeforeunload = function() {
            return "";
        }

    // Dynamically create a form element to submit the results
    // to your backend server
    var form = document.getElementById("payment-form");
    form.setAttribute('method', "POST");
    form.setAttribute('action', "//localhost/dubb/charge.php");

    // Add the token ID as a hidden field to the form payment-form
    var inputToken = document.createElement("input");
    inputToken.setAttribute('type', "hidden");
    inputToken.setAttribute('name', "stripeToken");
    inputToken.setAttribute('value', token.id);
    form.appendChild(inputToken);

    // Add the email as a hidden field to the form
    var inputEmail = document.createElement("input");
    inputEmail.setAttribute('type', "hidden");
    inputEmail.setAttribute('name', "stripeEmail");
    inputEmail.setAttribute('value', token.email);
    form.appendChild(inputEmail);

        // Finally, submit the form
    document.body.appendChild(form);

    // Artificial 5 second delay for testing
    setTimeout(function() {
        window.onbeforeunload = null;
        document.forms["payment-form"].submit()
    }, 5000);
  }

});

document.getElementById('stripe-demo').addEventListener('click', function(e) {
  handler.open();
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

有了这个，您需要创建新表单，只需使用javascript调用现有表单

Answer 2

在token回调函数中，您需要执行将令牌提交到后端所需的任何操作。

通常，这是通过使表单元素具有隐藏元素来完成的，并且从回调中您将隐藏元素的值设置为标记ID并提交表单。

您还可以从头开始动态创建表单，或者触发AJAX请求，或者任何其他适合您特定需求的方法。

以下是自定义集成的示例，该集成使用现有表单并设置回调中隐藏元素的值：https://jsfiddle.net/ywain/g2ufa8xr/

Answer 3

查看Stripe custom checkout not Posting上的帖子，你和我有同样的问题。希望这可以帮助你

Answer 4

我只是完成了这一切。所以我发现了一些提示 https://jsfiddle.net/user/ywain/fiddles/1/。在这里你应该看看https://jsfiddle.net/ywain/9zscyyhg/。在夏天，你必须得到条纹标记 token：function（token）{ //您可以使用{{1}}访问令牌ID。 //获取服务器端代码的令牌ID以供使用。

购买提交仅触发条纹模式付款表单。所以从形式上必须有回到网站的方式。这必须使用附加的JavaScript代码来完成。

Answer 5

希望这个能帮助你。你可以在这里参考https://gist.github.com/ziadoz/5101836

dtype

`

Answer 6

提交表单后，内容将发布到/create_subscription.php。我们能看到/create_subscription.php的内容吗？提交表单时的响应是什么，我们是否收到错误返回或状态代码200？你能访问php / web服务器日志吗？任何输出？

如何实现Stripe Checkout自定义按钮

6 个答案: