title: Get JSON response after a Stripe charge is made
body: <p>I am building a simple checkout with Stripe elements. After a successful charge is made, I would like to retrieve the <code>JSON</code>response from Stripe. From my understanding, a charge object should be created after each made charge.</p>
  
  <p>Simple example - after a charge is made, how to display thank you message on the checkout form itself? My reasoning was that after pulling the <code>JSON</code> I could check if the charge is successful and act accordingly.</p>
  
  <p>EDIT: I forgot to mention, the response I get now is something I can't decipher in the console.</p>
  
  <p><code>Response {type: "basic", url: "http://localhost/iq-test/charge.php", redirected: false, status: 200, ok: true, …}
  Response {type: "basic", url: "http://localhost/iq-test/charge.php", redirected: false, status: 200, ok: true, …}</code></p>
  
  <p>Expanding this in the console didn't help me either. I am a designer who knows some code, but far from this level.</p>
  
  <p>Here are relevant portions of both <code>JS</code> and <code>PHP</code>files.</p>
  
  <p><code>charge.js</code></p>
  
  <pre><code>// Handle form submission.
    const form = document.getElementById('payment-form');
    const errorElement = document.getElementById('card-errors')
    form.addEventListener('submit', function(event) {
      event.preventDefault();
  
      // here we lock the form
      form.classList.add('processing'); 
      stripe.createToken(card).then(function(result) {
        if (result.error) {
          // here we unlock the form again if there's an error
        form.classList.remove('processing');
          // Inform the user if there was an error.
          errorElement.textContent = result.error.message;
        } else {
          // Send the token to your server.
          stripeTokenHandler(result.token);
        }
      });
    });
  
      // Submit the form with the token ID.
       function stripeTokenHandler(token) {
  
  
  // Let's add name, email and phone to be sent alongside token
       const recipient_name = form.querySelector('input[name=recipient- 
       name]').value;
       const recipient_email = form.querySelector('input[name=recipient- 
       email]').value;
       const recipient_phone = form.querySelector('input[name=recipient- 
       phone]').value;
  
       let formData = new FormData();
       formData.append('stripeToken', token.id);
       formData.append('recipient_email', recipient_email); 
       formData.append('recipient_name', recipient_name); 
       formData.append('recipient_phone', recipient_phone); 
  
       // grab the form action url
       const backendUrl = form.getAttribute('action');
       // Post the info via fetch
       fetch(backendUrl, {
        method: "POST",
        mode: "same-origin",
        credentials: "same-origin",
        body: formData
       })
       .then(response =&gt; response)
       .then(response =&gt; console.log(response))
  
       }
  </code></pre>
  
  <p><code>charge.php</code></p>
  
  <pre><code>&lt;?php
  require_once "vendor/autoload.php";
  
  
  \Stripe\Stripe::setApiKey('xxx');
  
   $token = $_POST['stripeToken'];
   $amount = 299;
  
   //item meta
   $item_name = 'IQ Test Score Results';
   $item_price = $amount;
   $currency = "usd";
   $order_id = uniqid();
  
  
   try
    {
   $charge = \Stripe\Charge::create(array(
  'source'  =&gt; $token,
  'amount'  =&gt; $amount,
  'currency' =&gt; $currency,
  'description' =&gt; $item_name,
  'metadata' =&gt; array(
    'order_id' =&gt; $order_id
   )
    ));
   }
  catch(Exception $e)
  {
  $error = $e-&gt;getMessage();
  show__errorPayment($error);
  
  }
  
  if($charge-&gt;status == 'succeeded') {
  echo "Charge Created";
  $charge_json = $charge-&gt;__toJSON();
  }
  
  ?&gt;
  </code></pre>