条纹反应本机 |预装 UI 并稍后充电

Question

我正在遵循本指南 - https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet-custom

我正在尝试调整指南，以便我可以使用预建的 UI，但我想稍后向我的客户收费。

恼人的是，在 presentPaymentSheet() 被调用后，卡会立即收费，但我想在后端完成一些检查后向客户收费，这将需要一些 hours/days。

任何建议将不胜感激:)

服务器

import Stripe from 'stripe';
import express from "express";
const app = express()
import bodyParser from "body-parser";
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

const stripe = new Stripe('[API_KEY]',{
  apiVersion: '2020-08-27',
});

const port = 3000

var customer:Stripe.Response<Stripe.Customer>;
(async()=>{
  const _customer = await stripe.customers.retrieve("cus_KI8Y2B5gIU9nZI");
  if(_customer.deleted == true) throw new Error("Customer is deleted!");
  customer = _customer;
})();


app.post('/configure-paymentsheet', async (req, res) => {
  const ephemeralKey = await stripe.ephemeralKeys.create(
    {customer: customer.id},
    {apiVersion: '2020-08-27'}
  );
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 299,
    currency: 'gbp',
    customer: customer.id,
    confirm:false,
    off_session:true
  });
  res.send({
    ephemeralKey: ephemeralKey.secret,
    paymentIntent: paymentIntent.client_secret,
    customer: customer.id
  })
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

React Native

import React from 'react';
import { View, Button } from 'react-native';
import axios from "axios";
import { StripeProvider,  initPaymentSheet, presentPaymentSheet } from '@stripe/stripe-react-native';

export default class App extends React.Component{

  componentDidMount = ()=>{
    this.configurePaymentsheet()
  }
  private configurePaymentsheet = async()=>{
    const {data} = await axios.post("http://192.168.1.199:3000/configure-paymentsheet");
    const { error } = await initPaymentSheet({
      customerId: data.customer,
      customerEphemeralKeySecret: data.ephemeralKey,
      paymentIntentClientSecret: data.paymentIntent,
    });
    if(error){
      throw error;
    }
  }
  private openPaymentsheet = async()=>{
    const { error, paymentOption } = await presentPaymentSheet();

    if (error) {
      throw error
    }

  }
  render(){
    return(
      <StripeProvider
       publishableKey="[API_KEY]"
       urlScheme="localhost" // required for 3D Secure and bank redirects
     >
      <View>

      <Button title="Open payment" onPress={this.openPaymentsheet}/>

      </View>
      </StripeProvider>
    )
  }
}

Answer 1

如果您的支票通常需要不到 7 天的时间，您可以暂停该卡并在完成支票后提取资金[1]。如果您确定不应该向客户收费，您可以取消您用来持有资金的 PaymentIntent。

如果您的支票需要超过 7 天的时间，您将需要保存付款方式并稍后收款。 Stripe 有一个针对该流程的“设置未来付款”教程[2]，演示了如何收集卡详细信息、保存它们以及在完成检查后从卡中扣款。请务必牢记有关会话外参数和启动恢复流程的部分，以便在稍后为卡充电时为自己提供成功的最佳机会，并允许您的客户在需要他们采取进一步行动时做出回应。

[1]https://stripe.com/docs/payments/capture-later

[2]https://stripe.com/docs/payments/save-and-reuse?platform=react-native

条纹反应本机 |预装 UI 并稍后充电

stripe-react-native | Pre-built UI and charge later

stripe-payments

react-native

服务器

React Native