javascript - 完全被 Stripe Checkout 困住了

Question

目标:屏幕上有几个按钮，如下所示 –

[产品 1 – 20 美元]

[产品 2 – 35 美元]

等等...

用户可以选择任意数量的产品。在 JavaScript 中，我有一个变量 amount当用户选择产品时，该产品的成本就会增加。所以流程是这样的:

用户选择产品 1 和 2 --> 金额 = 20 + 35 = 55

然后，用户可以按“用卡支付”按钮启动 Stripe Checkout 模式。填写完毕，付款，完成。

问题:现在，我使用的是 Checkout 的自定义按钮版本，因此我可以按照自己的方式设置按钮样式并放入此变量金额。因此，该实现非常简单:

       var handler = StripeCheckout.configure({
            key: 'pk_test_XXXXXX',
            image: 'assets/logo-stripe.png',
            locale: 'auto',
            token: function(token, args) {
                // Use the token to create the charge with a server-side script.
                // You can access the token ID with `token.id`
                $.ajax({
                    url: 'php/charge.php',
                    type: 'post',
                    data: {tokenid: token.id, email: token.email, amount: amount},
                    success: function(data) {
                        if (data == 'success') {
                            console.log("Card successfully charged!");
                        }
                        else if (data == 'failure') {
                            console.log("Card error");
                        } else {
                            console.log("Other error");
                        }
                    },
                    error: function(data) {
                        console.log("AJAX error!");
                        console.log(data);
                    }
                });
            }
        });

        $('#pay-button').on('click', function(e) {
            if (amount == 0) {
                $('#pay-button').addClass('animated shake'); // Animates the button and refuses to open the modal if user didn't select any products
                $('#pay-button').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeAnimation);
            } else {
                handler.open({
                    name: 'Company, Inc.',
                    description: "Description",
                    amount: amount // Here's the variable
                });
                e.preventDefault();
            }
        });

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

这是 JavaScript 逻辑。我省略了对 checkout.js 的调用，因为这对这个问题没有任何影响。

从前端的 Angular 来看，这是完美的。现在是标记化和实际对卡进行收费。这就是事情开始出现问题的地方。如果您查看 token 处理，我会尝试将电子邮件、金额和 token 数据发布到 charge.php。基于我没有从控制台收到任何与此相关的错误，我认为这是可行的。

在 charge.php 中，我有这个:(4 月 20 日更新:这是工作代码)

<?php
  require_once('stripe-php/init.php');

  // Set secret key
  \Stripe\Stripe::setApiKey("sk_test_XXXXXXX");

  // Get the credit card details submitted by the form
  $token = $_POST['tokenid'];

  // Create the charge on Stripe's servers - this will charge the user's card
  try {
    $customer = \Stripe\Customer::create(array(
      'email' => $_POST['email'],
      'source'  => $token
    ));

    $charge = \Stripe\Charge::create(array(
      "amount" => $_POST['amount'],
      "currency" => "usd",
      "customer" => $customer->id
      ));

    echo "success";
  } catch(\Stripe\Error\Card $e) {
    // The card has been declined
    echo "failure";
  }

?>

每当我尝试购买时，日志都会显示“成功错误”。我大致遵循此处提供的代码 – How to create a stripe charge with a checkout token sent via AJAX to php 。所以，我不知道成功错误是什么，但我的猜测是数据已正确发送到 charge.php，但卡未收费。我的 Stripe 仪表板没有显示任何付款记录，这一事实证明了这一点。

我尝试过的:

1) 我认为错误可能是我的 config.php。我没有使用 Composer(因为我不知道它是什么，也不知道如何开始使用它)，所以我从 stripe-php 调用 init.php。根据 Stripe 自己的文档，这是 Composer 的一个可接受的替代方案。

这是 config.php:

<?php
  require_once('php/stripe-php/init.php');
  $stripe = array(
    secret_key      => getenv('sk_test_XXXXXX'),
      publishable_key => getenv('pk_test_XXXXXX')
  );
  \Stripe\Stripe::setApiKey($stripe['secret_key']);
?>

<罢工> 不再使用config.php，全部合并到charge.php

2) 在我的 POST 调用中，我传递了一个 tokenid，但在我的 charge.php 中，我使用 stripeToken。发生这种情况可能是因为我尝试使用 Stack Overflow 答案和 Stripe 文档来制定完整的解决方案。我觉得很奇怪的是 stripeToken 没有从我的前端发送。因此，我尝试在 charge.php 中使用 tokenid (将 stripeToken 替换为 tokenid 。更改为 tokenid 不起作用并带来安全问题(我宁愿坚持使用兼容的 stripeToken，但我不知道如何来实现它)。

3) 我担心将 amount 变量发送到 charge.php。我不希望用户在控制台中更改它，但如果我不发送它，我不知道如何进行可变定价。我需要可变定价，因为用户正在选择具有不同价格的多种产品(请参阅:目标)。所以，这对我来说是另一个难题。

可能值得注意的是，我必须在生产中对此进行测试才能获得成功错误。在 localhost 中，我收到 500 内部服务器错误。不知道为什么，但猜测与缺少 PHP 环境或文件结构有关。

任何帮助将不胜感激!谢谢。

Answer 1

您的token回调函数检查是否返回字符串“success”:

                success: function(data) {
                    if (data == 'success') {

但是您的charge.php文件不会返回“成功”，而是返回

echo '<h1>Successfully charged [amount]!</h1>';

或

echo '<h1>Charge failed</h1>';

您应该修改您的 charge.php 文件以返回前端代码所需的数据。由于它是通过 AJAX 调用的，因此浏览器不会显示其输出。

其他一些说明:

• 您应该将客户创建调用 (\Stripe\Customer::create(...)) 移至 try/catch 子句内。当creating a customer使用卡 token ，Stripe 将检查卡是否有效，如果不是则返回卡错误

• 除了客户应自行明确选择金额(例如接受客户指定的捐款)的情况外，您不应依赖客户浏览器发送的金额，因为更改该金额非常容易。