Stripe.createTokenWithCardAsync(params) 不能正常工作

问题描述

我正在使用 expo-payments-stripe 和 expo 制作应用程序。我创建了一个对象，以便将参数传递给函数 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",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”：空， “地址状态”：空， “地址邮编”：空， "brand": "签证","cardId": "card_1IlPKLAwYEmxhVRRJwEXUo5G","国家": "美国",“货币”：空， “CVC”：空， "expMonth": 10,"expYear": 2024,“指纹”：空， "资金": "信用","last4": "4242",“名称”：空， “数字”：空， },“创建”：1619662205000， “实时模式”：假， "tokenId": "tok_1IlPKLAwYEmxhVRRFmbUbymd",“使用”：假， }

解决方法

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

更一般地说，您应该在此处使用 Elements，以免将您的应用程序暴露给原始卡详细信息：https://stripe.com/docs/stripe-js/react

,

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