如何通过 Stripe Elements 在服务器端销售产品

Posted

技术标签:

【中文标题】如何通过 Stripe Elements 在服务器端销售产品【英文标题】:How to sell a product server-side via Stripe Elements 【发布时间】:2020-01-09 23:21:35 【问题描述】:

我通过https://dashboard.stripe.com/test/products 创建了一个测试产品。该产品的 ID 为“prod_...”。我想通过 Stripe Elements 销售此产品。

我创建了一个基本的 Stripe Elements 表单,它根据 their guide 获取用户的电子邮件地址和他们的卡信息:

purchase.html

    <form action="/api/process_payment" method="post" id="payment-form">
      <label>Email</label>
      <input type="text" name="email">
      <div id="card-element">
        <!-- Elements will create input elements here -->
      </div>

      <!-- We'll put the error messages in this element -->
      <div id="card-errors" role="alert"></div>

      <button id="submit">Pay</button>
    </form>

stripe.js

var stripe = Stripe('pk_test_lp7ZS0B23jNmorIoW6Wj0Rs2009E1xTCwS');
var elements = stripe.elements();

// Set up Stripe.js and Elements to use in checkout form
var style = 
  base: 
    color: "#32325d",
  
;

var card = elements.create("card",  style: style );
card.mount("#card-element");

card.addEventListener('change', function(event) 
  var displayError = document.getElementById('card-errors');
  if (event.error) 
    displayError.textContent = event.error.message;
   else 
    displayError.textContent = '';
  
);

var submitButton = document.getElementById('submit');

submitButton.addEventListener('click', function(ev) 
  stripe.confirmCardPayment(clientSecret, 
    payment_method: 
      card: card,
    
  ).then(function(result) 
    if (result.error) 
      // Show error to your customer (e.g., insufficient funds)
      console.log(result.error.message);
     else 
      // The payment has been processed!
      if (result.paymentIntent.status === 'succeeded') 
        // Show a success message to your customer
        // There's a risk of the customer closing the window before callback
        // execution. Set up a webhook or plugin to listen for the
        // payment_intent.succeeded event that handles any business critical
        // post-payment actions.
      
    
  );
);

但是,这个系统的问题是我需要验证用户的电子邮件地址是否存在于我的数据库中。因此,我需要确认支付服务器端而不是运行 stripe.confirmCardPayment(...)。

我想当他们访问我的购买 URL 时,我可以简单地使用烧瓶来创建付款意图:

@app.route("/payment", methods=["GET"])
def payment():
    return render_template("payment.html)


@app.route("/api/process_payment", methods=["POST"])
def process_payment():
    data = request.get_json()
    if data["email"] ...:   # some check
        payment_intent = stripe.PaymentIntent.create(
            amount=2000,
            currency="gbp",
            payment_method_types=["card"],
        )
        stripe.PaymentIntent.confirm(payment_intent["id"],)
        # verify payment and give status to user
    else:
        # inform user of invalid email

所以我们的想法是,当用户提交表单时,他们将数据发布到/api/process_payment,后者根据该数据创建支付意图,然后处理支付。但是,我还没有找到一种在支付意图中实际使用他们的支付信息的方法。我如何处理他们的支付服务器端?

此外,我想为我的一种产品创建付款意图,而不仅仅是指定金额。我该怎么做?

【问题讨论】:

【参考方案1】:

无法为产品创建 PaymentIntent,或(目前)以其他方式使用产品服务器端;您只能将它们与client-only Checkout 一起使用。

我认为您在这里要做的是使用this process,它首先创建支付意图服务器端(在您的“有效电子邮件检查”之后),然后处理收集支付详细信息并处理任何支付身份验证位客户端。

【讨论】:

以上是关于如何通过 Stripe Elements 在服务器端销售产品的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Elements 将持卡人姓名添加到 Stripe 结账?

如何使用 Bootstrap 设置 Stripe Elements 输入的样式?

Stripe Elements React - 如何从父组件获取条带数据?

React-Stripe-Elements 元素未按预期呈现样式

如何在 React 测试中加载 Stripe?

如何挂载单个卡片元素 stripe.js?