0

我正在尝试设置 Stripe Elements，对此我很陌生。

所以，我包含了关于元素的条带文档中的所有 JS，我安装了 Stripe API，并需要它，也链接到 Stripe JS。这就是我走了多远，PHP 位于 index.php 文件的顶部，该文件还包含 PHP 下方的 HTML 和 js。

PHP：

<?php 

require('C:/xampp2/htdocs/stripe/vendor/stripe/stripe-php/init.php');


// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("my_test_key");

// Token is created using Checkout or Elements!
// Get the payment token ID submitted by the form:
$token = $_POST['stripeToken'];

// Charge the user's card:
$charge = \Stripe\Charge::create(array(
  "amount" => 1000,
  "currency" => "usd",
  "description" => "Example charge",
  "source" => $token,
));

?>

HTML：

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display Element errors -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

JS：

<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('pk_test_wzqlUMA7qtsfN4RZnm9IOSkQ');
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
var style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    lineHeight: '24px'
  }
};

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
});

on stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}
</script>

我有点迷失在这整个事情中......你能给我一些白痴指南吗？

我还尝试将 .php 的操作更改为包含上述 php 代码的自定义 .php 文件，但结果相同。好像我的 php 代码无法与 javascript 通信。Chrome devtool 控制台没有显示一般的 javascript 错误。

提前感谢您的帮助

4

1 回答 1

1

我偶然发现了这个指南，删除了我从条纹文档中收集的所有内容，并根据它的魅力重新开始。

于 2017-10-31T00:33:01.897 回答