使用支付方式的自定义卡数据对 confirmCardSetup 进行条带化

Posted 2023-03-22

【中文标题】使用支付方式的自定义卡数据对 confirmCardSetup 进行条带化

【英文标题】：Stripe confirmCardSetup with custom card data for payment method

【发布时间】：2020-08-18 02:37:36

【问题描述】：

stripe.confirmCardSetup(clientSecret,
        
          payment_method: 
            card: 
               number: this.state.form.values.number,
            exp_month: this.state.form.values.expiry.substring(0,2),
            exp_year: this.state.form.values.expiry.substring(3,5),
            cvc: this.state.form.values.cvc,
             ,
            billing_details: 
              name: name,
            ,
          ,
        
      ).then(function(result) ...)

我试图创建一种付款方式，客户以后可以通过条带的 confirmCardSetup 使用，不使用条带元素，而是将卡信息（编号、cvc、到期日期）传递到付款方式字段。它没有用，我想知道我是否可以做这种性质的事情？ （我们在 react native 并且不想使用tipsi-stripe）

【问题讨论】：

嗨。我相信元素是实现这一目标的唯一方法。我没有在PaymentMethod 对象上看到card.number 属性，这可能会阻碍工作流程中内置的任何安全性。 stripe.com/docs/api/payment_methods/…

你发现了吗？我正在尝试对单独的字段做同样的事情，除了这个 SO 问题之外，我在网上找不到任何关于它的文档。

@Gillian 你能分享示例源代码链接吗？计划实施相同的

【参考方案1】：

我想出了如何使这项工作。如果其他人遇到同样的问题，以下是解决方案：

var paymentMethod = 
  payment_method: 
    card: this.cardNumberElement,
    billing_details: 
      name: this.billingNameText.getValue()
    
  
;

stripe.confirmCardSetup(setupIntentSecret, paymentMethod)
      .then(function(result)  ... );

如果您将属性 card 分配给您使用此代码创建的 cardElement 对象，则此方法有效：

this.elements = this.stripe.elements();
this.cardNumberElement = this.elements.create('cardNumber');
this.cardNumberElement.mount('#card-number');
this.cardExpiryElement = this.elements.create('cardExpiry');
this.cardExpiryElement.mount('#card-expiry');
this.cardCvcElement = this.elements.create('cardCvc');
this.cardCvcElement.mount('#card-cvc');

关键是您必须从同一个elements 对象创建所有组件。这会将所有组件关联在一起，并将所有对象的所有信息发送到 Stripe API。