时间戳

首页 > 解决方案 > 如何在条纹中保存卡片详细信息（javascript）

javascript - 如何在条纹中保存卡片详细信息（javascript）

问题描述

正如您看到我的问题，我很困惑，因为每次我得到不同的东西时，我都会看到许多用于保存卡的文章和条带文档解决方案。我的应用程序流程类似于第一个用户来，他将获得 2 个选项

  1. 以前保存的卡片
  2. 输入新卡

输入新卡

在这样做时，我从客户那里获取卡详细信息，然后我生成令牌并发送将从数据库中获取的令牌和客户 ID（如果是旧客户），这意味着客户已经生成并且在后端我首先创建客户（如果没有customerId found）使用我在添加付款信息后获得的条带令牌，然后使用我将向客户收费的 customerId

stripe.charges.create({
        amount:amount,
        description: '',
        currency: 'usd',
        customer: customerid
      })

现在我的问题开始了

我无法使用添加付款详细信息后获得的令牌，因为该令牌仅用于一次，并且我不能直接使用 customerId 向客户收费，那么我将来如何向客户收费以及如何获取客户保存的付款方式列表并删除或更新它们。

标签： javascriptfirebasereact-nativestripe-payments

解决方案

Stripe 支持一些存储卡详细信息的选项。您可以在初始付款后存储 paymentMethod 或存储卡详细信息然后付款。

要在付款前存储卡详细信息：

  1. 克里特条纹客户

CustomerCreateParams params = CustomerCreateParams.builder()
            .setName("Customer name")
            .setEmail("customer@email")
            .build();
Customer customer = Customer.create(params);

  1. 在后端准备 SetupIntent 对象

SetupIntentCreateParams setupIntentCreateParams = SetupIntentCreateParams.builder().setCustomer(customer.getId()).build();
SetupIntent intent = SetupIntent.create(setupIntentCreateParams);
return new PrepareSetupResponse(intent.getClientSecret());

  1. 发送intent.getClientSecret()至prepareSetupResponse.data.clientSecret前端

  2. 发送stripe.confirmCardSetup并用于在后端result.setupIntent.payment_method创建PaymentIntent

    .setOffSession(true).setConfirm(true);对于离线支付很重要

Builder paramsBuilder = builder()
            .setCurrency("USD")
            .addPaymentMethodType("card")
            .setOffSession(true)
            .setConfirm(true);
            .setPaymentMethod(confirmSubscriptionRequest.getPaymentMethod())
            .setCustomer(customer.getId());
            
PaymentIntent intent = PaymentIntent.create(paymentIntentParameters.build());

完整的 JS 端示例 

axios.post(prepareSetupUrl).then(prepareSetupResponse => {
      if (prepareSetupResponse.status === 200) {
        const clientSecret = prepareSetupResponse.data.clientSecret;
        stripe.confirmCardSetup(clientSecret, {
          payment_method: {
            card: elements.getElement(CardElement),
            billing_details: {
              name: "cardholder name"
            }
          }
        }).then(result => {
          if (result.setupIntent && result.setupIntent.payment_method) {
            axios.post(preparePaymentUrl, {
              paymentMethod: result.setupIntent.payment_method
            }).then((confirmPaymentResponse) => {
              if (confirmPaymentResponse.status === 200) {
                this.props.history.push("/checkout/success");
              } else {
                this.props.history.push("/checkout/failed");
                console.log(confirmPaymentResponse.statusText);
              }
            }).catch(exception => {
              console.log(exception);
              this.props.history.push("/checkout/failed");
            });
          } else {
            that.props.history.push("/checkout/failed");
          }
        });
      }

推荐阅读