是否可以用条纹元素实现验证验？

Question

我们目前在下一个.js网站上设置了条纹元素。这是一种捐赠表格，用户可以作为客人进行简单的一次性付款。

这是表格的“提交”方法的实现方式：

export const makeOneOffPayment = async (
  e,
  stripe,
  elements,
  clientSecret,
  setError,
  billingInfo,
  paymentAmount,
  paymentIntentId,
  CardNumberElement,
): Promise<boolean> => {
  // Initialise
  e.preventDefault();

  // Update the payment intent
  try {
    const res = await fetch('/api/payment-intent/update', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        amount: paymentAmount * 100,
        paymentIntentId: paymentIntentId,
      }),
    });

    if (!(res.status >= 200 && res.status <= 299)) {
      const result = await res.json();
      const message = result.message;
      setError(`Payment failed: ${message}`);
      return false;
    }
  } catch (err) {
    setError(`Process failure on client`);
    return false;
  }

  // Finish the payment
  try {
    const payload = await stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: elements.getElement(CardNumberElement),
        billing_details: {
          address: {
            city: billingInfo.city || '',
            line1: billingInfo.AddressLine1 || '',
            line2: billingInfo.AddressLine2 || '',
          },
          email: billingInfo.email,
          name: billingInfo.name,
          phone: billingInfo.phone,
        },
      },
    });
    if (payload.error) {
      setError(`Payment failed ${payload.error.message}`);
    } else {
      return true;
    }
  } catch (err) {
    setError(`Process failure on client`);
    return false;
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是一个简单的付款流程，但是我们遇到了问题 - 人们使用我们的表格正在“卡测试”。

根据Stripe的文档在这里，应使用验证码来防止这种情况。

问题是该代码在前端执行。

Stripe Support建议我们在“完成付款”试验块开始时添加Google Recaptcha验证，然后使用结果确定是否尝试完成卡付款。

但是，我们怎么能确定recaptcha验证的结果是真实的呢？我可以想象，由于所有逻辑在前端都运行，攻击者很容易欺骗响应？

我有什么办法可以成功地将验证码与当前处理流程集成在一起？

我能想到的方法是将逻辑移至API路线，然后验证验证码并在后端处理付款。但是我相信条纹。Confirmcardpayment旨在在前端运行（这有助于3D卡验证），因此我将面临一些不同的挑战，可以克服这种方法。

Answer 1

在公开结帐表格之前，您需要添加验证码。看看此视频。您也可以添加当无疑的情况下显示了无疑的行为。