Question

有没有办法修改默认的Stripe Checkout脚本以使用Leadpage上的link元素？

如果我使用默认代码，它会在现有按钮上放置一个蓝色按钮作为标准：

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

我尝试过使用下面的自定义按钮代码，但从我看到的内容中只允许使用ID，而不是类，这就是链接的编码方式。

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

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

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_ND6Tw8x8xxHBYNaBEAjZpBWq',
    image: '/square-image.png',
    token: function(token) {
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });

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

有没有办法让Leadpages上的链接元素在其上放置结帐脚本而不涉及另一个网站上的单独页面？

Answer 1

新示例使用jQuery，可以更轻松地找到您选择的任何元素。

https://stripe.com/docs/checkout#integration-custom

在您的头标记跟踪代码中：

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

在你的身体末端：

<script>
  var handler = StripeCheckout.configure({
    // ... from example ...
  });

  $('.cta-btn').on('click', function(e) {
    // Open Checkout with further options
    handler.open({
    // ... your own info here ...
    });
    e.preventDefault();
  });

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

你必须弄清楚正确的CSS选择器，在模板中，我正在看按钮使用＆＃34; cta-btn＆＃34; CSS类，所以我把＆＃34; .cta-btn＆＃34;作为jQuery搜索的目标。

将按钮的URL设置为您想要的任何内容，可能是：

javascript:alert('Please enable Javascript or change browsers and try again.')

这会弹出对话框。

从链接而不是Leadpages上的按钮调用Stripe结帐表单

1 个答案: