payment fail invalid payment method

@boyjarv That's only an id, how do you communicate these informations to stripe ?

Have you seen that you need to confirm the card setup confirmCardSetup ?

https://stripe.com/docs/js/setup_intents/confirm_card_setup

@vincent15000 Thanks, I'm getting so confused!

I believe the problem to be in my register method here:

const register = async () => {
  errors.value = [];

  try {
    let res = await axios.post('api/register', {
      client_id: clientId.value,
      first_name: firstName.value,
      last_name: lastName.value,
      email: email.value,
      password: password.value,
      password_confirmation: confirmPassword.value,
    });
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.token;
    console.log('Response Data: ', res);
    const user = res.data.user;
    userStore.setUserDetails(res);
    console.log('UserStore: ', userStore);
    await profileStore.fetchProfileById(userStore.id);
    await postStore.fetchPostsByUserId(userStore.id);
    const stripeInstance = await initializeStripe();
    console.log('stripeInstance: ', stripeInstance)
    // Make an API request to your backend to create a customer and subscription
    const subscriptionResponse = await axios.post('api/create-subscription', {
      user,
      customerEmail: email.value,
      customerName: firstName.value + ' ' + lastName.value,
      priceId: 'price_1NSmEQH8B3O205oeHPngASZm', // Replace with your actual Stripe price ID
      paymentMethod: cardElement.value, // Pass the cardElement reference here
    }).then(function(result) {
    // Handle result.error or result.setupIntent
    console.log('result: ', result);
    });
    console.log('subscriptionResponse: ', subscriptionResponse)
    // Handle the subscription response as needed
    const subscriptionId = subscriptionResponse.data.subscriptionId;
    // ...
    console.log('subscriptionId: ', subscriptionId)
    router.push('/account/profile/' + userStore.id);
  } catch (error) {
    if (error.response && error.response.data && error.response.data.errors) {
    errors.value = error.response.data.errors;
  } else {
    errors.value = ['An error occurred. Please try again.'];
  }
  }
};

if anyone can help, I would be happy to pay some money Thanks

@boyjarv Does the payment method already exist in your cashier account ?

@boyjarv

Sorry I meant does your user already has a payment method registered ?

https://laravel.com/docs/10.x/billing#retrieving-payment-methods

Here are the payment methods.

https://stripe.com/docs/testing?locale=fr-FR&testing-method=payment-methods

@vincent15000 no I don't think so... how can I register one?

@boyjarv You only need to register a payment method if you create a subscription (not required for a single charge).

As you can see here, you need to pass the payment method id to the create function.

https://laravel.com/docs/10.x/billing#creating-subscriptions

That means that you need to register a payment method before creating a subscription.

https://laravel.com/docs/10.x/billing#storing-payment-methods

@vincent15000 hi, aren't I already doing this here:

public function create(Request $request)
    {
        $user = User::findOrFail($request->user['id']); // Assuming the authenticated user is available
        
        $user->newSubscription('default', $request->priceId)
            ->create($request->paymentMethodId, [
                'email' => $request->customerEmail,
                'name' => $request->customerName,
                // Additional data fields can be set here
            ]);

        // Optionally, you can retrieve the subscription ID and return it in the response
        $subscriptionId = $user->subscription('default')->id;

        return response()->json([
            'subscriptionId' => $subscriptionId,
        ]);
    }

Why would the payment method be the card element value ?

paymentMethod: cardElement.value // ???

The payment method is a code beginning by pm_ and automatically generated by Stripe when you create a new payment method for a customer.

Step by step, you could have it work.

In the view where your customer will type his payment details, you need to pass the intent secret variable. This view can for example be the view where you display the price the customer has to pay and the form to type the payment details (name, credit card number, ...).

https://laravel.com/docs/10.x/billing#storing-payment-methods

// content of the controller method to display the view to type the payment details
return view('update-payment-method', [
    'intent' => $user->createSetupIntent()
]);

In this view, you need to have the stripe JS script.

// form for the customer to type his payment details
<form method="POST" action="{{ route('subscribe.post') }}" id="payment-form">
    @csrf

	<input id="card-holder-name" type="text">
	 
	<!-- Stripe Elements Placeholder -->
	<div id="card-element"></div>
	 
	<button id="card-button" data-secret="{{ $intent->client_secret }}">
	    Update Payment Method
	</button>
</form>

// stripe script
<script src="https://js.stripe.com/v3/"></script>
 

<script>
    const stripe = Stripe('your-stripe-public-key');
 
    const elements = stripe.elements();
    const cardElement = elements.create('card');
 
    cardElement.mount('#card-element');
</script>
 
// script to confirm the card details
<script>
	const cardHolderName = document.getElementById('card-holder-name');
	const cardButton = document.getElementById('card-button');
	const clientSecret = cardButton.dataset.secret;
	 
	cardButton.addEventListener('click', async (e) => {
		e.preventDefault();

	    const { setupIntent, error } = await stripe.confirmCardSetup(
	        clientSecret, {
	            payment_method: {
	                card: cardElement,
	                billing_details: { name: cardHolderName.value }
	            }
	        }
	    );
	 
	    if (error) {
	        console.log(error.message);
	    } else {
	        stripeSubscriptionHandler(setupIntent.payment_method);
	    }
	});

	// function to submit the form and pass the payment method to the controller and 
    function stripeSubscriptionHandler(paymentMethod) {
        let form = document.getElementById('payment-form');
        let hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'paymentMethod');
        hiddenInput.setAttribute('value', paymentMethod);
        form.appendChild(hiddenInput);
        form.submit();
    }
</script>

Then in the controller to subscribe.

auth()->user()->newSubscription(
    'default', 'price_sdjfhgkjlghfdg' // here is the price you have created directly on stripe
)->create($request->paymentMethod);

return redirect()->route('subscribe');

I just tested this code a few minutes ago and it works fine.

PS Your code is very confusing because it contains a lot of lines. You should factorize it to let it easier to read.

@boyjarv And once the payment method is registered, instead of creating a new one, for example for future payments, you can retrieve the default payment method of the customer.

In that case all the JS scripts are not required and you have only to retrieve the payment method of the customer to use it.

auth()->user()->newSubscription(
    'default', 'price_sdjfhgkjlghfdg'
)->create(auth()->user()->defaultPaymentMethod()->id);

return redirect()->route('subscribe');

If the customer has registered several payment methods you can retrieve all his payment methods and let him choose which he wants to use.

@boyjarv You could for example follow the Cashier serie on Laracast ?

https://laracasts.com/series/billing-with-laravel-cashier

The explanations and demonstrations are very clear.

I can help you ... what type of project is it ? Is it a personal project ? A project for your client ?

@vincent15000 Thank you, it's a personal project, to show case my skills... this really is the final piece hence making it live.. although I will be adding to my project.

The idea is that when someone registers, they pay a subscription fee and can then upload unlimiited artwork, I'll have a look at: https://laracasts.com/series/billing-with-laravel-cashier but feel my code may be too messy now

Thanks

@boyjarv Don't hesitate if you need more help.

@vincent15000 so I have been at it all night again following carefully the instructions except my project is in Vue not blade, I am currently trying to get the Client secret out of the form

here is the top part of my form:

<form @submit.prevent="handleSubmit" id="payment-form" ref="paymentForm" :data-secret="clientSecret">

here is my handlePayment method:

const handlePayment = async () => {
  const stripe = await initializeStripe();
  const elements = stripe.elements();
  try {
    // Create the card element and mount it to the DOM
    // Get the form element reference using $refs
    const form = ref(paymentForm);
console.log('Form: ', form);
    // Access the 'data-secret' attribute using getAttribute
    const clientSecret = form.value.getAttribute('data-secret');
    const card = elements.create('card');
    card.mount('#card-element');
    

    const { setupIntent } = await stripe.confirmCardSetup(clientSecret, {
      payment_method: {
        card,
        billing_details: {
          name: firstName.value + ' ' + lastName.value,
          // You can add additional billing details here if needed
        },
      },
    });
    paymentMethodId.value = setupIntent.payment_method;
    console.log('setup intent: ' + setupIntent)
  } catch (err) {
    console.error(err.message);
  }
};

so I'm stuck on this line it doesn't know what clientSecret is, I can't paste in the string directly:

const { setupIntent } = await stripe.confirmCardSetup(clientSecret, {

its taken me about 2 hours to get up to 14:30 on this video: https://laracasts.com/series/billing-with-laravel-cashier/episodes/1

@boyjarv It seems that you are putting the value into datasets.

<div id="mydiv" data-mysuperdata="mydata"></div>

If this is the case, you can retrieve the datas like this.

var element = document.getElementById('mydiv');
var data = element.dataset.mysuperdata;

You have tried this : form.dataset.secret and this will work only if the data-secret attribute is inside the form tag.

Can you share the piece of HTML code where you are using the data-secret attribute please ?

@vincent15000

Thanks, I already shared this bit above:

<form @submit.prevent="handleSubmit" id="payment-form" ref="paymentForm" :data-secret="clientSecret">

I'm getting: RegisterView.vue:230 Cannot read properties of undefined (reading 'secret')

@boyjarv Does this work ?

var form = document.getElementById('payment-form');
var data = form.dataset.secret;
console.log(data);

@vincent15000 no, I get:

Invalid value for stripe.confirmCardSetup intent secret: value should be a client secret of the form ${id}secret${secret}. You specified: sk_test_51LGnwdH8B3O205oeVPUinr3kxVokSe3Bxx.......

@boyjarv The client secret is different from the stripe public key, they are not the same.

The stripe public key is to call the API.

And the client secret is to check if the card is correctly setup.

You're going to fast, you have to check everything step by step before going further.

You're going to fast, you have to check everything step by step before going further.

💯

@boyjarv I don't know what you are doing wrong. Sure something is wrong, but the only way to find what is to write the code step by step and after each step check the content of the different variables you are handling to be sure that they contain the right values.

These steps are based on my complete example in a previous comment.

For each step, you need to add only a piece of code, not all the code at once, and each time check if it works before adding the next piece of code.

Step 1 : create a setup intent => check that the setup intent is successfully created and contains the client_secret property, this can be done with a dd($intent) inside the controller

Step 2 : write the form used to subscribe => check if the form displays correctly and check the source code of the page to check if the client secret is put in the data-secret attribute of the button

Step 3 : add the js.stripe.com/v3 script => check if there is no error in the console

Step 4 : add the script to handle the form (the script where you have to use the stripe public key) => check if there is no error in the console

Step 5 : add the script to confirm the card setup, here you have a condition directly in the script to check if there is an error => add a console.log in each part (error => console.log(error.message) / no error => console.log(setupIntent)) and check in the console if all works fine, you should see the setupIntent object with the payment_method property

Step 6 : add the paymentMethod value to the form by handling the DOM => check if the payment_method is added into the form

Step 7 : submit the form => from the controller, check with dd() what values are in the request, you should have the payment_method (and other values)

Step 8 : in the controller, add the needed code to create the subcription => check in the database and on your stripe dashboard if the subscription is created

@boyjarv I would have helped you via Google Meet ;). Where are you from ?

@boyjarv You have some UK test cards available in the stripe documentation.

@vincent15000 but my card-element is asking for zip

@boyjarv For me too, it's probably necessary in some countries.

You can customize some fields with the available options.

https://stripe.com/docs/js/elements_object/create_element?type=card

@boyjarv If you have enough informations, you can close the post by assigning a best answer.