CODEWITHSUNDEEP
javascriptphpstripe-payments
Lisan Mulena
Lisan Mulena

Reputation: 123

How to implement a Stripe Checkout custom button

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>

Upvotes: 8

Views: 20979

Answers (6)

Graphixdesignax
Graphixdesignax

Reputation: 51

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

Upvotes: 5

kiki_ygn
kiki_ygn

Reputation: 103

Hope this one help you. You can refer here https://gist.github.com/ziadoz/5101836

    <input 
        type="submit" 
        value="Pay with Card"
        data-key="PUBLISHABLE STRIPE KEY"
        data-amount="500"
        data-currency="cad"
        data-name="Example Company Inc"
        data-description="Stripe payment for $5"
    />

    <script src="https://checkout.stripe.com/v2/checkout.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script>
    $(document).ready(function() {
        $(':submit').on('click', function(event) {
            event.preventDefault();
            var $button = $(this),
                $form = $button.parents('form');
            var opts = $.extend({}, $button.data(), {
                token: function(result) {
                    $form.append($('<input>').attr({ type: 'hidden', name: 'stripeToken', value: result.id })).submit();
                }
            });
            StripeCheckout.open(opts);
        });
    });
    </script>

`

Upvotes: 0

Comdenz
Comdenz

Reputation: 1

I'm just through with all that. So I've found some hints at https://jsfiddle.net/user/ywain/fiddles/1/. Here you should look at the https://jsfiddle.net/ywain/9zscyyhg/. At summery you have to get the stripe token at token: function(token) { // You can access the token ID with token.id. // Get the token ID to your server-side code for use.

The submit of the Purchase only triggers the Stripe modal payment form. So from the form there has to be a way back to the site. This has to be done with addintional javascript code.

Upvotes: 0

IMO
IMO

Reputation: 307

Checkout the post on Stripe custom checkout not Posting you have the same issue as me. Hope this helps you out

Upvotes: 0

Ywain
Ywain

Reputation: 17533

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/

Upvotes: 1

David J Eddy
David J Eddy

Reputation: 2037

When the form is submitted the content is POSTed to /create_subscription.php. Can we see the contents of /create_subscription.php? What is the response when submitting the form, do we get an error return or a status code 200? Are you able to access the php / web server logs? Any output?

Upvotes: -1

Related Questions