Stripe.createToken with Card Async(params) 不能正常工作

Question

我正在使用带有 expo 的 expo-payments-stripe 制作应用程序。我创建了一个对象，以便将参数传递给函数 Stripe.createTokenWithCardAsync(params)。但是，console.log(params) 显示了我要发送到函数的所有内容，但是从函数返回的令牌没有我传递好的所有参数。

这是我的代码：

import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View, TouchableHighlight } from 'react-native';
import { CreditCardInput } from 'react-native-credit-card-input';
import {PaymentsStripe as Stripe} from 'expo-payments-stripe';


export default class TarjetaScreen extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            data: {},  //JSON vacío
            bolTarjeta: false
        }
    }

    // Metodo que se va a ejecutar cada vez que el usuario rellene un campo del formulario y pasa en formData los valores en un JSON.
    onChange = (formData) => {
        this.setState({data: formData.values,  //Metemos en data el JSON de los valores insertados.
        bolTarjeta: formData.valid})  //Sera true cuando el usuario retorne todos los campos y sean válidos.
    }

    onFocus = (field) => console.log("focus", field) //Se va a ejecutar cada vez que el usuario pinche en un textinput.

    async componentDidMount () {
        Stripe.setOptionsAsync({
            publishableKey: 'pk_test_51IkSMjAwYEmxhVRRPOaKFC3ORP9KNS1PymGMGdoer0InVFq0HbDaa2VLAas9UdjJvM1LIsKKsrLFhicEtfq5wrtm00oaDwyGJ8'
        })
    }

    pagar = async () => {
        const params = {
            number: this.state.data.number,
            expMonth: parseInt(this.state.data.expiry.substring(0,2)),
            expYear: parseInt(this.state.data.expiry.substring(3,5)),
            cvc: this.state.data.cvc
        }
        console.log(params.number)
        const token = await Stripe.createTokenWithCardAsync(params)
        console.log(token) 
        const source = await Stripe.createSourceWithParamsAsync({ type: 'card', amount: this.props.money, currency: 'EUR'})
        console.log(source) 
    }

    render() {
        return (
            <View style={{ flex:1, alignItems: 'center'}}>
                <View style={{ width: '100%', height: '30%', marginTop: 60}}>
                    <CreditCardInput
                        autofocus
                        requiresName
                        requiresCVC
                        cardScale={0.9}
                        validColor={'black'}
                        invalidColor={'red'}
                        placeholderColor={'darkgray'}
                        placeholders={{number: "1234 5678 1234 5678", name: "NOMBRE COMPLETO", expiry: "MM/YY", cvc:"CVC"}}
                        labels={{number: "NÚMERO TARJETA", expiry: "EXPIRA", name: "NOMBRE COMPLETO", cvc: "CVC/CCV"}} //Lo pongo en español, por defecto vienen en inglés
                        onFocus={this.onFocus}
                        onChange={this.onChange}
                    />
                </View>
                <View style={{
                    width: 280,
                    marginTop: 150,
                    marginBottom: 20,
                    backgroundColor: '#B71C1C',
                    borderRadius: 60,
                }}>
                    <TouchableOpacity onPress={()=>this.pagar()}>
                        <Text style={{
                            textAlign: 'center',
                            fontSize: 17,
                            color: 'white',
                            paddingVertical: 15
                        }}>Pagar</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

console.log(params) 打印：对象 { “cvc”：“424”， "expMonth": 10, "expYear": 24, “数字”：“4242 4242 4242 4242”， }

console.log(token) 打印：对象 { “卡”：对象{ “地址城市”：空， “地址国家”：空， “addressLine1”：空， “addressLine2”：空， “地址状态”：空， “地址邮编”：空， “品牌”：“签证”， "cardId": "card_1IlPKLAwYEmxhVRRJwEXUo5G", “国家”：“美国”， “货币”：空， “cvc”：空， "expMonth": 10, "expYear": 2024, “指纹”：空， “资金”：“信用”， "last4": "4242", “名称”：空， “数字”：空， }, “创建”：1619662205000， “现场模式”：假， "tokenId": "tok_1IlPKLAwYEmxhVRRFmbUbymd", “使用”：错误， }

Answer 1

您永远不会从 Stripe 获得完整的卡号或 CVC，因为这些都是敏感数据。

更一般地说，您应该在这里使用 Elements，这样您就不会将您的应用程序暴露给原始卡详细信息：https://stripe.com/docs/stripe-js/react

Answer 2

我已经使用 stripe-client 解决了这个问题。