完全堅持 Stripe Checkout

Question

目標：屏幕上有幾個按鈕，就像這樣——

[產品 1 – 20 美元]

[產品 2 – 35 美元]

等等...

用戶可以選擇任意數量的產品。 在 JavaScript 中，我有一個可變amount ，當用戶選擇它時，它會隨着產品成本的增加而增加。 所以流程是這樣的：

用戶選擇產品 1 和 2 --> 數量 = 20 + 35 = 55

然后，用戶可以按下 Pay with Card 按鈕來啟動 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 的調用，因為這對這個問題沒有任何影響。

從前端的角度來看，這是桃子。 現在是標記化並實際為卡充電。 這就是事情開始出現問題的地方。 如果您查看令牌處理，我正在嘗試將電子郵件、金額和令牌數據發布到 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";
  }

?>

每當我嘗試購買時，日志都會顯示“成功錯誤”。 我大致遵循此處提供的代碼 – 如何使用通過 AJAX 發送到 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。 我不希望用戶在他們的控制台中更改它，但是如果我不發送它，我不知道如何進行可變定價。 我需要可變定價，因為用戶正在選擇具有不同價格的多種產品（請參閱：目標）。 所以，這對我來說是另一個難題。

可能值得注意的是，我必須在生產中對此進行測試才能獲得成功錯誤。 在本地主機中，我收到 500 內部服務器錯誤。 不知道為什么，但猜測與缺乏PHP環境或文件結構有關。

任何幫助將不勝感激！ 謝謝你。

Answer 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 調用的，因此瀏覽器不會顯示其輸出。

其他幾點說明：

• 您應該在try/catch子句中移動客戶創建調用（ \\Stripe\\Customer::create(...) ）。 使用卡令牌創建客戶時，Stripe 將檢查卡是否有效，如果不是，則返回卡錯誤

• 除了客戶應該自己明確選擇金額（例如接受客戶指定的捐贈）的情況之外，您不應依賴客戶瀏覽器發送的金額，因為更改它非常容易。