Stripe: not getting cards back after creating customer


#1

Hi everybody, I’m testing Stripe PHP integration for my web app, I have finally succesfully created a customer and a source (using test card data from stripe’s web). Wht I do is collect info with stripe elements, then I do an axios call with card generated source, in my laravel backend I create a new customer and attach created source to customer, then I retrieve the customer sources BUT I’m getting a empty array, no sources are retrieved from my newly created customer…

Here is my controller method (I create customer here and attach source at same time, as seen in the dcs):

public function createSourceAndCustomer(Request $request){

        $user = Auth::user();
        
        if(!$user){
            return response()->json([
                'message' => 'Error, user not found.',
            ], 500);
        }

        $customer = Customer::create([
            "source" => $request->input('source.id'),
        ]);

        $user->stripeId = $customer->id;
        $user->save();

        $customerSources = Customer::retrieve( $user['stripeId'] )->sources->all(array("object" => "card"));

        return response()->json([
            'message' => 'Success, Customer created and source retrieved.',
            'customer' => $user,
            'customerSources' => $customerSources,
            'checkoutStatus' => 2
        ], 200);
   
    }

This is my JSON response, notice empty data array where my card should be.

This is my vue component where I have my elements.js and stripe.js integration:

<template>
<div class="STRIPEform51_maincontainer">
    <layout-title-4 :number="2" :text="'Datos de pago'"></layout-title-4>
    <div class="STRIPEform51_column_container">
        <form id="payment-form" class="STRIPEform51_form_maincontainer" method="POST" action="/stripe/create-source-and-customer">
            <div class="STRIPEform51_form_header_container">
                <span class="STRIPEform51_form_header_label_medium">Nombre del titular</span>
                <span class="STRIPEform51_form_header_label_medium">Número de tarjeta</span>
                <span class="STRIPEform51_form_header_label_small">Caduca</span>
                <span class="STRIPEform51_form_header_label_small">CVC</span>
            </div>
            <div class="STRIPEform51_form_inputs_container">
                <input class="STRIPEform51_form_inputs_input_medium" type="text" v-model="cardHolder">
                <div class="STRIPEform51_form_inputs_input_medium" id="card-number-element"></div>
                <div class="STRIPEform51_form_inputs_input_small" id="card-expiry-element"></div>
                <div class="STRIPEform51_form_inputs_input_small" id="card-cvc-element"></div>
            </div>
            <div class="STRIPEform51_form_buttons_container">
                <div class="STRIPEform51_form_buttons_errors_container">
                    <i class="STRIPEform51_form_buttons_errors_icon fas fa-times" v-show="error"></i>
                    <span class="STRIPEform51_form_buttons_errors_text" v-show="error">{{ error }}</span>
                </div>
                <button class="STRIPEform51_form_buttons_button_container" type="button">
                    <span class="STRIPEform51_form_buttons_button_text"> Añadir tarjeta</span>
                </button>
            </div>
        </form>
    </div>
    <div class="STRIPEform51_column_container">
        <layout-title-4 :number="3" :text="'Confirmar pedido'"></layout-title-4>
        <div class="discount_buy_container">
            <div class="discount_buy_price_container">
                <span class="discount_buy_price_label">Precio total:</span>
                <span class="discount_buy_price_value">{{ cartTotalPrice }}€</span>
            </div>
            <button class="discount_buy_price_button" @click="charge( cartItems )">Finaizar compra</button>
        </div>
        <div class="discount_notice_maincontainer">
            <div class="discount_notice_message_container">
                <div class="discount_notice_message_icon_container">
                    <i class="discount_notice_message_icon fa fa-lock"></i>
                    <span class="discount_notice_message_icon_text">Compra segura</span>
                </div>
                <a class="discount_notice_message_text" href="">(saber mas...)</a>
            </div>
        </div>
    </div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { stripePK } from '../../config/stripe.js';
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
name: 'STRIPEform51',


computed:{
    ...mapState('Stripe', ['customer', 'customerSources', 'loadingStatus', 'errors']),
    ...mapGetters('Cart', ['cartTotalPrice']),
},


data: function () {
    return {
       showPaymentForm: false, 
       stripePK: stripePK,
       cardHolder: '',
       error:'',
    }
},


mounted() {
    console.log(this.$options.name + ' component succesfully mounted');
    this.getCustomerSources();
    var self = this;

    let stripe = Stripe(this.stripePK);
    let elements = stripe.elements();

    let style = {
        base: {
            color: 'rgba(0,0,0,0.7)',
            fontSmoothing: 'antialiased',
            fontSize: '16px',

            '::placeholder': {
                color: 'rgba(0,0,0,0.7)'
            }
        },
        
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    let cardNumberElement = elements.create('cardNumber', {style: style});
    cardNumberElement.mount('#card-number-element');

    let cardExpiryElement = elements.create('cardExpiry', {style: style});
    cardExpiryElement.mount('#card-expiry-element');

    let cardCvcElement = elements.create('cardCvc', {style: style});
    cardCvcElement.mount('#card-cvc-element');

    cardNumberElement.addEventListener('change', function(event) {
        if (event.error) {
            self.error = event.error.message
        } 
        else {
            self.error = '';
        }
    });

    cardExpiryElement.addEventListener('change', function(event) {
        if (event.error) {
            self.error = event.error.message
        } 
        else {
            self.error = '';
        }
    });

    cardCvcElement.addEventListener('change', function(event) {
        if (event.error) {
            self.error = event.error.message
        } 
        else {
            self.error = '';
        }
    });

    $('#payment-form').submit(function(e) {
        console.log('submitted');
        e.preventDefault();

        stripe.createSource(cardNumberElement).then(function(result) {
            if (result.error) {
                self.error = result.error.message;
            } 
            else {
                stripeSourceHandler(result.source);
            }
        });
    });

    function stripeSourceHandler(source) {
        
        let cardInfo = {
            source: source,
            name: self.cardHolder,
        }

        console.log(cardInfo);
        self.createSourceAndCustomer(cardInfo);
    }
},


methods: {
    ...mapActions('Stripe', ['getCustomerSources', 'addSource', 'charge', 'createSourceAndCustomer']),

    togglePaymentForm: function(){
        this.showPaymentForm = !this.showPaymentForm;
    },
}


};
</script>

When I create source from elements I get a source id console logged so afaik the card is indeed generated, you can see it here: