没有服务器,如何在React中完成通过Stripe Checkout客户端进行的购买?

时间:2019-06-05 12:09:11

标签: reactjs stripe-payments

我在我的React App (create-react-app)中使用Stripe Checkout客户端集成

购买可以正常使用,但似乎我没有选择搜索成功的付款或付款后收到相关信息的选择。 (Stripe Checkout Fulfilment Options

条纹签出的实现方式如下:

import React, { Component } from 'react';

const stripe = window.Stripe('INSERT_API_KEY');

class Checkout extends Component {
  checkout() {
    stripe.redirectToCheckout({
      items: [
        {plan: 'INSERT_PLAN_ID', quantity: 1}
      ],
      successUrl: 'https://localhost:3000/checkout/success',
      cancelUrl: 'https://localhost:3000/checkout/success'
    }).then((result) => {
      // If `redirectToCheckout` fails due to a browser or network
      // error, display the localized error message to your customer
      // using `result.error.message`.
      console.log(result)
    });
  }
  render() {
    return (
      <button onClick={this.checkout}>Pay</button>
    )
  }
}

成功/取消网址对我没有多大帮助,因为我想不出只允许实际付款的用户访问的安全机制。 你有什么想法吗?

如果您想知道为什么我不使用服务器:

我没有服务器,因为我正在使用 AWS Amplify Library Apollo客户端(GraphQL)),这使我可以在客户端进行数据库工作。

1 个答案:

答案 0 :(得分:1)

fulfilling purchases的选项中,最可靠的路径是编写后端并使用服务器代码。就是说,如果您真的对避免编写服务器代码有强烈的信心,我建议您与Zapier这样的第三方插件一起使用,以处理成功的购买并将其发送到电子表格或其他用于管理实现的工具中。

  

使用Stripe + Zapier可以基于Stripe中的常见活动触发工作流,例如吸引新客户,获得新付款等等。 https://stripe.com/works-with/zapier

出于多种原因,不建议从客户端进行轮询。