title: How to obtain a client-side token without using Stripe's UI layer?
body: <p>I have the following php page that works fine:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://checkout.stripe.com/checkout.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var handler = StripeCheckout.configure({
            key: '&lt;?=$stripePublicKey?&gt;',
            image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
            locale: 'auto',
            token: function(token) {
              // You can access the token ID with `token.id`.
              // Get the token ID to your server-side code for use.
              console.log("token.id: " + token.id);
              console.log("token: " + token);
            }
          });
  
          function init(){
              document.getElementById('customButton').addEventListener('click', function(e) {
                  // Open Checkout with further options:
                  handler.open({
                      name: 'TruckerCert',
                      description: 'Buy Certs',
                      amount: 2000
                  });
                  e.preventDefault();
              });
  
              // Close Checkout on page navigation:
              window.addEventListener('popstate', function() {
                handler.close();
              });
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="init()"&gt;
  &lt;h1&gt;Stripe Token Test&lt;/h1&gt;
  &lt;button id="customButton"&gt;Purchase&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works and produces the following JSON:</p>
  
  <pre><code>{
    "id": "tok_1E255j2*****wC135im",
    "object": "token",
    "card": {
      "id": "card_1E255j2H1*****RGS4Kqc",
      "object": "card",
      "address_city": null,
      "address_country": null,
      "address_line1": null,
      "address_line1_check": null,
      "address_line2": null,
      "address_state": null,
      "address_zip": null,
      "address_zip_check": null,
      "brand": "Visa",
      "country": "US",
      "customer": null,
      "cvc_check": "pass",
      "dynamic_last4": null,
      "exp_month": 12,
      "exp_year": 2021,
      "fingerprint": "3nk5B*****29xV",
      "funding": "unknown",
      "last4": "1111",
      "metadata": {
      },
      "name": "her*******@gmail.com",
      "tokenization_method": null,
      "type": "Visa"
    },
    "client_ip": "67.***.***.17",
    "created": 1549754315,
    "email": "her********@gmail.com",
    "livemode": false,
    "type": "card",
    "used": false
  }
  </code></pre>
  
  <p>So that is all as expected. The problem is, the only way I can find to submit my credit card # and exp date and receive back the JSON is by going through their UI. For example, when I click my <code>customButton</code>, this dialog appears:</p>
  
  <p><a href="https://i.stack.imgur.com/oCaIl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oCaIl.png" alt="enter image description here"></a></p>
  
  <p>I don't want to use their cc form. I have my own CC form. I want to use my own form, send an ajax request to Stripe's API endpoint, and receive back the JSON just as above. I have combed through Stripe's online docs for an hour and can't find any way to do this.</p>
  
  <p>How is it done?</p>