javascript - Laravel 5.1 - 自定义按钮 STRIPE 支付

Question

我的电子商务中有 Stripe 支付按钮，如下所示:

<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_yNuawoy0jUqj1GC14jwcQR5d"
data-amount="{{ $total * 100}}"
data-name="dixard"
data-description="Widget"
data-image="https://s3.amazonaws.com/stripe-uploads/acct_14s03fK9wMx3sd9Bmerchant-icon-1416180891533-icona.jpg"
data-locale="auto"
data-currency="eur"
data-id="stripe">
</script>

我想用 css 样式自定义这个按钮，这可能吗？我如何使用 css 自定义脚本？

感谢您的帮助!

Answer 1

您不能使用 CSS 自定义默认按钮，但可以改用您自己的按钮。这个想法是使用 Custom Checkout反而。您需要将一些 Javascript 代码添加到您的页面，以便您可以将点击处理程序附加到您自己的按钮，该按钮将自动触发结账。

您可以在此处查看基本示例:http://jsfiddle.net/ra010dby/1/但想法是你会做这样的事情:

var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  token: function(token) {
      $("#stripeToken").val(token.id);
      $("#stripeEmail").val(token.email);
      $("#myForm").submit();
  }
});

$('#customButton').on('click', function(e) {
  var amount = $("#amount").val() *100;
  // Open Checkout with further options
  handler.open({
    name: 'Demo Site',
    description: '2 widgets ($20.00)',
    amount: amount
  });
  e.preventDefault();
});