完全坚持Stripe Checkout

时间:2016-04-17 19:03:34

标签: javascript php stripe-payments

目标:屏幕上有几个按钮,就像这样 -

[产品1 - $ 20]

[产品2 - $ 35]

依旧......

用户可以根据自己的喜好选择多种产品。在JavaScript中,我有一个变量amount,它随着用户选择产品的成本增加而增加。所以流程是这样的:

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

然后,用户可以按下Pay with Card按钮启动Stripe Checkout模式。填写,付款,完成。

问题:现在,我正在使用Checkout的自定义按钮版本,因此我可以按照我的方式设置按钮并将此变量放入其中。因此,该实现非常简单:< / p>

       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打电话,因为这对这个问题没有任何影响。

从前端的角度来看,这是桃色的。现在进行标记化并实际为卡充电。事情开始出现问题。如果您查看令牌处理,我正在尝试将电子邮件,金额和令牌数据发布到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)我担心将金额变量发送到charge.php。我不希望用户在他们的控制台中更改它,但如果我不发送它,我不知道如何变量定价。我需要可变定价,因为用户正在选择具有不同价格的多种产品(请参阅:目标)。所以,这对我来说是另一个难题。

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

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

1 个答案:

答案 0 :(得分:1)

您的token回调函数会检查是否返回字符串"success"

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

但是您的charge.php文件未返回"success",而是返回

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

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

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

其他一些评论:

  • 您应该在\Stripe\Customer::create(...)子句中移动客户创建调用(try/catch)。当creating a customer使用卡片令牌时,Stripe会检查该卡是否有效,如果情况并非如此,则会返回卡片错误

  • 在客户应自行明确选择金额的情况之外(例如,接受客户指定的捐赠),您不应该依赖客户浏览器发送的金额,如它很容易改变它。