【问题标题】:Make a Stripe payment with Jquery AJAX? (Javascript ONLY)使用 Jquery AJAX 进行 Stripe 付款? (仅限 JavaScript)
【发布时间】:2016-12-13 15:44:28
【问题描述】:

我正在尝试为 Stripe 制作自定义付款表单,并且我想手动对 Stripe 进行 AJAX 调用。 (而不是提交事件)

但是,首先我很确定我将它发布到错误的地方。但我不知道我应该向哪个 URL 发出这个帖子请求。

如果我使用正确的网址。我收到了405 not allowed 回复。没有关于我的请求有什么问题的信息。

这是我得到的:

Stripe.setPublishableKey('pk_test_12345');
    Stripe.card.createToken({
      number: ccNum,
      cvc: ccCVC,
      exp_month: ccMonth,
      exp_year: ccYear
    }, stripeResponseHandler);

这部分工作正常,给我一个 200 OK 状态,我从服务器收到了一个令牌。

function stripeResponseHandler(status, response) {
      console.log('card status: ', status);
      console.log('token: ', response.id);
      $.ajax({
        type: 'POST',
        url: 'https://checkout.stripe.com/checkout.js',
        headers: {
          stripeToken: response.id
        },
        data: {
          number: ccNum,
          cvc: ccCVC,
          exp_month: ccMonth,
          exp_year: ccYear
        },
        success: (response) => {
          console.log('successful payment: ', response);
        },
        error: (response) => {
          console.log('error payment: ', response);
        }
      })
    }

但是,这给了我 405 Not Allowed。端点是 .js 文件对我来说似乎有点奇怪。这就是为什么我假设我得到了错误的 URL。

谁能帮我弄清楚如何为 Stripe 付款提出手动过帐请求?

【问题讨论】:

标签: javascript jquery ajax stripe-payments


【解决方案1】:

免责声明:这行得通,但这是可怕的做法。不要将其用于实际项目。我需要它用于仅前端的测试环境。正如此页面上的其他用户所指出的,您应该在后端执行此操作!

我终于在https://stripe.com/docs/api#create_charge找到了一些有用的文档

因为我怀疑我使用的 URL 有误。

在获得正确的 URL 后,下面的 ajax 调用就起作用了:

希望这对其他人也有帮助!大多数答案是 PHP 或其他后端语言。

$.ajax({
        type: 'POST',
        url: 'https://api.stripe.com/v1/charges',
        headers: {
          Authorization: 'Bearer sk_test_YourSecretKeyHere'
        },
        data: {
          amount: 3000,
          currency: 'usd',
          source: response.id,
          description: "Charge for madison.garcia@example.com"
        },
        success: (response) => {
          console.log('successful payment: ', response);
        },
        error: (response) => {
          console.log('error payment: ', response);
        }
      })

【讨论】:

  • @MLyck:如果您直接从前端代码发布到 API,那么您将泄露您的密钥供任何人查看。正如另一个答案所建议的那样,您需要将令牌发送到您的后端,并从后端代码发送费用创建请求。
  • @Ywain 是非常正确的——我的第一条评论认为它可能是一种更好的方法是不正确的。请求必须在后端提出
  • @Ywain 我是一名前端学生,我的项目没有后端,因此请求仅使用 Javascript 版本。但是感谢您澄清了很难找到它的 Javascript 版本的原因。
  • 前端和后端是概念。您的代码所在的文件夹是后端,以及为您的代码提供服务的任何基础设施、环境和应用程序。你可能没有后者,但前者是后端的一部分;你可以很容易地在你的计算机上使用 Apache Server 来运行 PHP。 一点也不复杂。安装 XAMPP,通过单击按钮启动它,将 index.html 和其他文件粘贴到 htdocs 文件夹中,然后将 index.html 更改为 index.php。您现在可以使用 PHP - 超级简单!见这里:phpknowhow.com/basics/working-with-xampp
  • @MLyck 有第三方集成(需额外付费)让您仅使用前端代码(例如commencepayments.com)接受付款。但如果你对它有任何兴趣,正如 Nick 所说,后端开发并不是那么困难。由于您似乎已经熟悉 JavaScript,您可以查看 Node.js 以使用 JavaScript 服务器端。 Stripe 有一个官方库。
【解决方案2】:

编辑:这是不安全的(并且已过时)!您不应将用户的卡信息直接发送到您自己的服务器。相反,您应该直接将其发送给 Stripe。有一个最新的(使用意图等)​​示例here


你需要在你的$.ajax()函数中POST到一个PHP文件:

  $.ajax({
    type: 'POST',
    url: './stripe-payment.php',
    headers: {
      stripeToken: response.id
    },
    data: {
      number: ccNum,
      cvc: ccCVC,
      exp_month: ccMonth,
      exp_year: ccYear
    },
    success: (response) => {
      console.log('successful payment: ', response);
    },
    error: (response) => {
      console.log('error payment: ', response);
    }
  })

您的 PHP 应该有类似 Stripe PHP bindings require()d 的东西来使用 Stripe 支付 API,并且 PHP 文件应该看起来像这样,来自 this SO question

<?php

require_once('Stripe.php');

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

// Get the credit card details submitted by the form
$token = json_decode($_POST['chargeData']);
$tokenid = $token['id'];

// Create the charge on Stripe's servers - this will charge the user's card
try {
$charge = Stripe_Charge::create(array(
  "amount" => 2000, // amount in cents, again
  "currency" => "usd",
  "card" => $tokenid,
  "description" => "payinguser@example.com")
);
echo 'success';
} catch(Stripe_CardError $e) {
  // The card has been declined
    echo $tokenid;
}

?>

更多信息请参阅 Github 的 README 以及 Stripe documentation

【讨论】:

  • @TemporaryName:这并不过分——这是正确的做法。令牌必须发送到商家的后端服务器,用于创建费用请求。如果您直接从前端请求将令牌发送到 API,则会泄露 API 密钥。
  • @TemporaryName 是的,实际上再看一遍,这正是您链接到的 API 所说的...
  • @Ywain,你说得对,我是个白痴。我没有意识到令牌是密钥。
  • 它可以工作,但它不符合 PCI 规则将卡信息发送到您的服务器的适当方式。 Stripe 建议通过将卡信息发送到 Stripe 来生成来源,然后将该来源发送到后端并相应地处理付款。在他们的文档中非常清楚。
  • @YousafHassan 你知道他们对重读你过去写的代码是怎么说的。你是对的!
猜你喜欢
  • 2015-06-13
  • 2018-12-05
  • 1970-01-01
  • 2023-03-18
  • 2022-01-17
  • 2015-04-13
  • 2019-08-08
  • 2020-03-19
  • 2018-09-26
相关资源
最近更新 更多