How to implement a Stripe Checkout custom button

Question

According to the documentation, Checkout supports two different integrations: Simple and Custom.

The simple way works for me:

**<form action="create_subscription.php" method="POST">**
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="asdsdfasd3232"
  data-amount="2000"
  data-name=""
  data-description="2 widgets"
  data-image="https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.png"
  data-locale="auto">
</script>
</form>

However in the custom way I don't understand how and where should I call the "create_subscription.php" script. This is the custom integration code:

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

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'asdsdfasd3232',
  image: 'https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.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.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: '',
    description: '2 widgets',
    amount: 2000
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

I've tried this code, but it is not working. Can someone point me in the right direction?

<form action="/create_subscription.php" method="POST">
      <script src="https://checkout.stripe.com/checkout.js"></script>
      <div id="stripe-demo" class="evo-button rounded cele">
      <span>Register</span>
      </div>

      <script>
      var handler = StripeCheckout.configure({
        key: "asdsdfasd3232",
        image: "img/logo.png",
        name: "",
        description: "Subscription for 1 month",
        panelLabel: "Sign Me Up!",
        amount: "2000",
        allowRememberMe: false
      });

      document.getElementById('stripe-demo').addEventListener('click', function(e) {
        handler.open();
        e.preventDefault();
      });

      window.addEventListener('popstate', function() {
        handler.close();
      });
      </script>
    </form>

Solution 1

Thanks to Comdenz This is the way i solve it using existing form and calling my server side code.

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
 key: "your testing key",
  locale: 'auto',
  image: "image/directory",
  name: "Name",
  description: "your discription",
  panelLabel: "Click to make payment",
  allowRememberMe: false,


  token: function(token) {
    // Prevent user from leaving page
    window.onbeforeunload = function() {
            return "";
        }

    // Dynamically create a form element to submit the results
    // to your backend server
    var form = document.getElementById("payment-form");
    form.setAttribute('method', "POST");
    form.setAttribute('action', "//localhost/dubb/charge.php");

    // Add the token ID as a hidden field to the form payment-form
    var inputToken = document.createElement("input");
    inputToken.setAttribute('type', "hidden");
    inputToken.setAttribute('name', "stripeToken");
    inputToken.setAttribute('value', token.id);
    form.appendChild(inputToken);

    // Add the email as a hidden field to the form
    var inputEmail = document.createElement("input");
    inputEmail.setAttribute('type', "hidden");
    inputEmail.setAttribute('name', "stripeEmail");
    inputEmail.setAttribute('value', token.email);
    form.appendChild(inputEmail);

        // Finally, submit the form
    document.body.appendChild(form);

    // Artificial 5 second delay for testing
    setTimeout(function() {
        window.onbeforeunload = null;
        document.forms["payment-form"].submit()
    }, 5000);
  }

});

document.getElementById('stripe-demo').addEventListener('click', function(e) {
  handler.open();
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

With this, you done need to make new form, just call your existing form using the javascript

Solution 2

In the token callback function, you'd need to do whatever is necessary to submit the token to your backend.

Typically, this is done by having a form element with a hidden element, and from the callback you'd set the value of the hidden element to the token ID and submit the form.

You could also dynamically create the form from scratch, or fire an AJAX request, or any other method that is appropriate for your specific needs.

Here is an example of a custom integration that uses an existing form and sets the value of hidden elements from the callback: https://jsfiddle.net/ywain/g2ufa8xr/

Comments

[Lisan Mulena]

create_subscription.php never gets called. The checkout window is closed and no error is shown.

[David J Eddy]

I am not super familiar with the Strip process but IIRC it uses the JS to retrieve a token then posts the form with the token to authorized a transaction. Try executing the create_subscription on response from stripe via the ` window.addEventListener('popstate', function() { handler.close(); });` logic

[Lisan Mulena]

That is a great idea @Pheagey I've tried giving the form the id of "target" and: window.addEventListener('popstate', function() { $("#target").submit(); handler.close(); }); Unfortunately the script is not called

[David J Eddy]

Herm, if the script is not called the error is likely occurring earlier in the execution chain.

[Jordi Puigdellívol]

How to receive the stripeEmail with this implementation?