Payment Integrations: Is it possible to integrate Stripe Checkout?

  • phillmx
    Asked on June 20, 2016 at 9:32 AM

    I love your system. But for what I'm trying to do, the regular Stripe Form will be to much. I need the Stripe checkout option. Is it possible to implicate it so when the user hits the button and checkout,

    it'll pull all the info that the user entered into the whole form and send it to my data base?
    Thanks in advance.
  • Kevin Support Team Lead
    Replied on June 20, 2016 at 10:19 AM

    Currently we only support the standard Stripe payment integration, but you can easily implemented by using a code similar to this: 

    <form action="/charge" method="POST">

      <script

        src="https://checkout.stripe.com/checkout.js" class="stripe-button"

        data-key="Your Key Here"

        data-amount="2000"

        data-name="Stripe.com"

        data-description="2 widgets"

        data-image="/img/documentation/checkout/marketplace.png"

        data-locale="auto">

      </script>

    </form>

    This will allow you to capture de data sent from the form and then you will be able to pay using Stripe Checkout. 

    Here is a guide with more info about this: https://stripe.com/docs/checkout 

    Here is a guide that will help you to sent post data from your form: Send-POST-Data-From-JotForm-Using-PHP-in-Custom-Thank-You-Page

    Your custom thank you page could be the page where the form, code given above, is place so you will capture the data and process the payment. 

    Your second question to pull your data to your database has been moved to a different thread, it can be found on this link: https://www.jotform.com/answers/864567 

    I will also escalate this thread to our second level so our developers may consider implementing this feature, if this comes available we will let you know via this thread. 

     

  • phillmx
    Replied on June 20, 2016 at 6:54 PM

    Thanks for your answer. But the problem with this method is that, I don't want any info sent to my data base until the charge is successful. Is this yet possible using Stripe Checkout? Or, it's only possible using the basic form from Stripe. Basically, by my customer tapping "Pay Now" in Stripe's widget, the info from Jotform AND the info from Stripe's widget is sent to my database. I'm working on an Uber Type service. www.pathcar.link and I can have nothing less then the best already have.

  • Kevin Support Team Lead
    Replied on June 20, 2016 at 8:15 PM

    I have already escalated this to our second level, so we should wait to see if it is developed. 

    To send the data to your database when the payment is done, you will need to capture the data in the payment page, then submit it to a second file where you will capture the data and send it to your database, the line of code that needs to be changed in the form given above is this one: 

    <form action="/charge" method="POST"> 

    Where in the form action you need to point to the file where you will insert the data to your database once the payment is done. 

    <form action="Link to the file with the process of insert to a database" method="POST">

    Here is also a JavaScript option, this is a bit complex and should help you: 

    <script src="//code.jquery.com/jquery-3.0.0.min.js"></script>

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

     

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

     

    <script>

     var handler = StripeCheckout.configure({

       key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',

       image: '/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("Has entered");

       }

     });

     

     $('#customButton').on('click', function(e) {

       // Open Checkout with further options:

       handler.open({

         name: 'Stripe.com',

         description: '2 widgets',

         amount: 2000

       });

       e.preventDefault();

     });

     

     // Close Checkout on page navigation:

     $(window).on('popstate', function() {

       handler.close();

     });

    </script>

    This line of code will indicate you once the payment is done: console.log("Has entered"); 

    So in that function you will know when the payment is done and you will be able to send the data to your database.

    I think that you should try with the first method, paste all the code to insert to your database in the second file and point the "action" to this file so this will be triggered only when the form has been successfully completed. 

     

  • phillmx
    Replied on June 21, 2016 at 6:56 AM

    Thank you SO SO much. I'll try this and let you know if I was successful 

  • Elton Support Team Lead
    Replied on June 21, 2016 at 9:06 AM

    Great!

    Please try out my colleague's solution and let us know here if we can be of further assistance.

    Regards!

  • phillmx
    Replied on June 21, 2016 at 9:36 AM

    I put that code into the Form's Embed code on top of the source code. pretty sure I did it wrong. I am REALLY new to coding. Only some HTML knowledge from 13 years ago.

     

    But maybe I can do this, if possible

     

    When the user enters the info into the form, instead of a submit button, it can have a save button. And the browser holds the info until the successful payment token is returned. Is this possible? 

     

    I really do appreciate you guys help. You're not only Support, you're helping people be successful.

    Thank You 

     

    Also, I am using Wix for now. I may have to change because they don't offer secured sites for payments, unless you're using their store

  • Elton Support Team Lead
    Replied on June 21, 2016 at 11:28 AM

    Unfortunately, as far as I know that's not possible as of the moment unless this is directly integrated with JotForm.

    Basically, what you need in order to achieve this for now is a custom thank you page. Your custom thank you page will serve as the data medium between the form and stripe checkout.

    The form needs to be submitted first in order for the submission to be processed so you will get an email containing the user's data. During the submission, the form will redirect to your custom thank you page where the form data is captured and passed it on stripe checkout. Example the amount entered from the form will be passed into Stripe. You can also autosubmit the stripe form when the custom thank you page loads so the user will be prompted with the stripe checkout's modal window.

    Example:

    Payment Integrations: Is it possible to integrate Stripe Checkout? Image 1 Screenshot 20

     

    I have created a sample form for you that will redirect to a custom thank you page with stripe's checkout.

    https://form.jotform.com/61724576681969

    Here's what I did:

    1. I wrote a simple PHP script that captures the form data product name and product value base on the above form. You can get it here http://pastebin.com/raw/q6K0pH2h

    2. I saved the PHP file e.g. stripeCheckout.php and uploaded it to my server

    3. I set it as my form's thank you page https://www.jotform.com/help/38-How-to-Redirect-to-a-Page-After-Form-Submission.

    4. Then Enable POST Data on the form - https://www.jotform.com/help/51-How-to-Post-Submission-Data-to-Thank-You-Page

    If you need further help, let us know.

    Regards!

  • phillmx
    Replied on June 29, 2016 at 6:41 PM

    Hello,

     

    Sorry for taking so long to get back to you. 

    So, I tried this:

    Now, I am using Weebly to build the site. So, I "pretty much" tried your solution. I think. There's no way to upload your own page to Weebly, not that I know of, but they do have a cool editor, that lets you edit anything on the page. So I added the .php code you wrote to the page, should that have worked? Or does it need to be a page by itself ending .php? 

    I then set the Thank You Page to that address. So I'm guessing I have to find a way to be able to upload a .php webpage?

  • David JotForm Support Manager
    Replied on June 29, 2016 at 7:50 PM

    Yes, you need to uploaded the .php file to your server, as my colleague did in step 2.

  • phillmx
    Replied on June 30, 2016 at 3:19 PM

    OK, I was able to set the thank you page and have the Stripe Checkout tool automatically pop up. Thanks for that. But, I am still unable to push the form info into the Stripe widget.

    Example:

    http://pathcar.weebly.com/north-jersey-drivers.html

    Does the fields on the form have to be a certain name? Then after the stripe widget returns the token, will the widget be able to push the info to a data base?

     

    Thanks again

  • Nik_C
    Replied on June 30, 2016 at 6:09 PM

    As far as I could check the PHP wrote by my colleague, you should match your field names to the names in your PHP file, can you double check if that's the case?

  • phillmx
    Replied on July 1, 2016 at 10:47 AM

    Payment Integrations: Is it possible to integrate Stripe Checkout? Image 1 Screenshot 20

     

    I don't know where to add the field names. It's either I break the page altogether, or nothing happens. Am I on the right track? I would like stripe to capture all the fields, if that's possible. But for now, I'm trying to get at least the minimum as Elton did for me above. My field names on the form are Price and SelectDriver

  • phillmx
    Replied on July 1, 2016 at 4:41 PM

    I don't know how, but I got it working. Thanks guys

  • David JotForm Support Manager
    Replied on July 1, 2016 at 5:07 PM

    On behalf of my colleague Elton, you are welcome! :)

  • phillmx
    Replied on July 2, 2016 at 8:01 AM

    Payment Integrations: Is it possible to integrate Stripe Checkout? Image 1 Screenshot 20

    So when I add the require_once('./config.php') function, It breaks the PHP. I've been trying to get it working, I just can't figure it out. I renamed the stripe lib folder to just "Stripe" and it's in the same folder as my website. Why won't it load?

  • Boris
    Replied on July 2, 2016 at 6:40 PM

    Are you sure a config.php file exists at that location?

    Currently, your PHP script is looking for a file named config.php at the same folder where your current PHP page is. If there is no config.php there, it would result in a failed "require_once".

    The sample code our colleague provided above, and which should be working, doesn't ask for the require_once('./config.php') part, so please try omitting that part from your customized PHP.

    I would also like to add that while we try to help as much as we can regarding functionalities of our forms, if you need assistance coding specialized functions on a PHP page, it may be best to hire a dedicated PHP developer to properly assist you with turning any additional functions into reality.

    If there is anything else we can help you from our end, please let us know. Thank you.

  • phillmx
    Replied on July 3, 2016 at 5:45 AM

    I was just trying diffrent things. when I inserted require_once('./config.php'), that was an example. I did have it as require_once('stripe/config.php'). But I only asked for help with this php cause elton had wrote it for me. But if i cant charge the card, whats the point? thanks anyway

  • Elton Support Team Lead
    Replied on July 3, 2016 at 8:34 AM

    @phillmx

    I tested a cloned version of your form and your stripe checkout page is working fine.

    Payment Integrations: Is it possible to integrate Stripe Checkout? Image 1 Screenshot 20

    Is there any particular reason why you need to add the config.php on the code? While we have no access on that particular file and your PHP script, just please ensure that the file path of the config.php file links properly in your code.

    Example:

    require_once('./config.php'); //the config.php file should be on the same directory of your stripe checkout php file. This is similar to require_once('config.php');

    If the config.php file is on a stripe subfolder , you can use the following.

    require_once('stripe/config.php');

    It's just a matter of dot and slash for pointing the right directory. You can use the following list as a quick reference:

       /   = Root directory

       .   = This location

       ..  = Up a directory

       ./  = Current directory

       ../ = Parent of current directory

       ../../ = Two directories backwards

    If you have further questions, let us know.

  • phillmx
    Replied on July 3, 2016 at 9:47 AM

    I must be missing the point in using config.php. I thought it told the browser to redirect to charge.php. That's the part I'm missing. Everything I've tried, when I load the page, it'll just say cannot load page. But I'll figure it out, I really do appreciate getting me this far.