title: Missing value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}_secret_${secret}
body: <p>I'm working on an e-commerce web app using Laravel and Vuejs. I chose Stripe's API to accept and manage payments.
  In my Vue component, which contains the payment form, and before making it visible(I'm using a multi-step form), I send a post request to my payments store controller function to 'initialize' Stripe and get the clientSecret variable. As follows:</p>
  <pre><code> axios
          .post('http://127.0.0.1:8000/payments', {
              headers: {
              'content-type': 'multipart/form-data'
              },
              'total': this.total,
              'mode_payment': this.mode_payment
          })
  
  </code></pre>
  <p>This is how the store function looks like in my PaymentController:</p>
  <pre><code>public function store(Request $request)
  {
      $payment = new Payment; 
  
      $payment-&gt;montant_payment = $request-&gt;total;
      $payment-&gt;mode = $request-&gt;mode_payment;
      $payment-&gt;date_payment = Carbon::now();
      $payment-&gt;statut_payment = false;       
      $payment-&gt;save();
  
      Stripe::setApiKey(env('STRIPE_SECRET'));
  
      header('Content-Type: application/json');
  
      $intent = PaymentIntent::create([
        'amount' =&gt; $payment-&gt;montant_payment,
        'currency' =&gt; 'usd',
      ]);
  
     
      $clientSecret = Arr::get($intent, 'client_secret');
      $amount = $payment-&gt;montant_payment;
  
      return response()-&gt;json($clientSecret);        
  }
  </code></pre>
  <p>As you can see, the store function sends back a JSON response containing the clientSecret variable. This response is then captured by the same Vue component discussed above.</p>
  <p>This is how the Vue component captures the response:</p>
  <pre><code>.then((response) =&gt; {
      this.clientSecret = response.data;
      var stripe = 
      Stripe('pk_test_51JL3DSLJetNHxQ3207t13nuwhCB1KPvUJJshapsOQATnZn79vA4wK3p9Hf2yi2uUXfXXWdAtLZGRepfJGvRnd7oI006Kw6rFTC');
      document.querySelector(&quot;button&quot;).disabled = true;
      var elements = stripe.elements();
      var style = {
      base: {
          color: &quot;#32325d&quot;,
      }
      };
  
      this.card = elements.create(&quot;card&quot;, { style: style });
      this.card.mount(&quot;#card-element&quot;);
      this.card.on('change', ({error}) =&gt; {
      let displayError = document.getElementById('card-error');
      if (error) {
          displayError.classList.add('alert', 'alert-warning');
          displayError.textContent = error.message;
      } else {
          displayError.classList.remove('alert', 'alert-warning');
          displayError.textContent = '';
      }
      });
  
      var form = document.getElementById('payment-form');
  
      form.addEventListener('submit', function(ev) {
          ev.preventDefault();
          // If the client secret was rendered server-side as a data-secret attribute
          // on the &lt;form&gt; element, you can retrieve it here by calling `form.dataset.secret`
          stripe.confirmCardPayment(String(this.clientSecret), {
              payment_method: {
                  card: this.card,
                  billing_details: {
                      name: &quot;testan testo&quot;
                  }
              }
          })
          .then(function(result) {
              if (result.error) {
              // Show error to your customer (e.g., insufficient funds)
              console.log(result.error.message);
              } 
              else {
              // The payment has been processed!
                  if (result.paymentIntent.status === 'succeeded') {
                      console.log(result.paymentIntent);
                      window.location.href = 'http://127.0.0.1:8000/payment-success/';
                  }
              }
          });
      });
  })
  </code></pre>
  <p>Using Vue web dev tools I checked that the clientSecret variable has been successfully passed from the laravel store controller function to the payment Vue component, thanks to the execution of the commmand : <code>this.clientSecret = response.data;</code>.</p>
  <p>However, when clicking the pay button, I get the following error in my console:</p>
  <pre><code>Uncaught IntegrationError: Missing value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}_secret_${secret}.
      at X ((index):1)
      at Q ((index):1)
      at lo ((index):1)
      at (index):1
      at (index):1
      at e.&lt;anonymous&gt; ((index):1)
      at e.confirmCardPayment ((index):1)
      at HTMLFormElement.eval (ComLivPay.vue?5598:339)
  </code></pre>
  <p>I guess the problem then is in the next portion of code:</p>
  <pre><code>stripe.confirmCardPayment(String(this.clientSecret), {
      payment_method: {
          card: this.card,
          billing_details: {
              name: &quot;testan testo&quot;
          }
      }
  })
  </code></pre>
  <p><strong>EDIT:</strong></p>
  <p>Since the problem seems to arise from the string form of the <code>this.clientSecret</code> variable. Here's how it looks like in Vue dev tools:</p>
  <p><a href="https://i.stack.imgur.com/p3ESR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p3ESR.png" alt="enter image description here" /></a></p>