Stripe.createTokenWithCardAsync(params) doenst't work well

Question

I'm making an application using expo-payments-stripe with expo. I make an object in order to pass the params to the function Stripe.createTokenWithCardAsync(params). However, console.log(params) shows all I want to send to the function, but the token returned from the function doesn't have all the parameters I've passed well.

Here is my code:

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) prints: Object { "cvc": "424", "expMonth": 10, "expYear": 24, "number": "4242 4242 4242 4242", }

console.log(token) prints: Object { "card": Object { "addressCity": null, "addressCountry": null, "addressLine1": null, "addressLine2": null, "addressState": null, "addressZip": null, "brand": "Visa", "cardId": "card_1IlPKLAwYEmxhVRRJwEXUo5G", "country": "US", "currency": null, "cvc": null, "expMonth": 10, "expYear": 2024, "fingerprint": null, "funding": "Credit", "last4": "4242", "name": null, "number": null, }, "created": 1619662205000, "livemode": false, "tokenId": "tok_1IlPKLAwYEmxhVRRFmbUbymd", "used": false, }

Answer 1

I've solve this problem using stripe-client.

Answer 2

You will never get the full card number nor the CVC back from Stripe, as those are sensitive data.

More generally, you should be using Elements here so you aren't exposing your application to raw card details: https://stripe.com/docs/stripe-js/react