Skip to main content
Kinetic Community

Accepting Credit Card Payments with Stripe

Start accepting credit card payments with Kinetic Task, Kinetic Request and Stripe. Incorporating cloud based services like credit card processing service Stripe is now easier than ever with Kinetic Task and Kinetic Request. In this example I'll show how to setup Stripe inside your Kinetic Request form and process the transaction via Kinetic Task. Premise This example came about because we wanted to start accepting credit cards for our annual user group (KEG) right inside the form versus having a separate invoice and credit card payment.  We, of course, also wanted to use Kinetic Request to pull in the registration information and Kinetic Task to add the new registrants to the appropriate lists and send a notification to the planning group. This example could be used for any scenario where Stripe handles payment within your forms.  It is also a good example of how to incorporate external services that combine client-side activity (Stripe's Javascript API within Kinetic Request) with server-side activity (Kinetic Task sending data).

Usage

Handlers Needed

Form Elements

  • A Request text element that adds a <button> HTML element
  • Some Stripe-specific javascript added to the customHeaderContent field (advanced tab)

Steps

  1. Get an account from Stripe:  They will require some banking information, along with a (reasonable) fee of 2.9% + $0.30 per transaction.  Funds get transferred from Stripe within a couple of days after a person purchases something from you.  They also have a great subscription service for recurring payments.

  2. Add Stripe Javascript to your Kinetic Request form:  This javascript gets added to in via the “custom header content” field on your form (Advanced Tab) and passes values from the form (email, price, etc.) to a Stripe popup.  The javascript also then submits the form automatically after the credit card details are validated by Stripe.

  3. Submit the charge to Stripe: Once the form is submitted to Kinetic Request, it passes the values retrieved to Kinetic Task, where a task tree is waiting.  A Stripe handler/node in this tree then passes the charge over to Stripe along with your private credentials, which returns a charge ID from Stripe that can be used for auditing/troubleshooting.  

More information on each step is found in the example below.

Example

Get an account from Stripe

  1. Visit https://stripe.com and register for a new account
  2. You will need to provide some banking information in order to accept real payments.  However, you can incorporate the form and test it prior to doing this step.
  3. Go to  the sidebar and select API.
  4. On here both your Live (production) and Test public and private keys.  To view and work with Testing date you must toggle the test data in the sidebar. You use your public key on the form itself as it is visible to the public if they examine the HTML/Javascript source. You use the secret key in your Kinetic Task Handler configuration.  This will not be visible to the public.

 

Stripe Account API Keys Testing

Stripe Account API Keys Live

 

Add Stripe Javascript to your Kinetic Request Form

Stripe automatically submits a form after the credit card is validated.  Because we don't want to interfere with a normal Kinetic Request submission, I've created a text element that holds a button.  I place this at the end of the form and hide the 'real' submit button via CSS.

 

<button id='stripe-buy' class='btn btn-default'>Purchase</button>

 

We also add a hidden form element to hold the token we get back from Stripe after a user enters their credit card and it is validated.  The token represents a validated credit card and can only be used once.  This allows us to never hold credit card information.  We're merely holding an id (the token) that Stripe gives us.

Below is close to the Javascript used on the Kinetic Training 2017 registration form.  It primarily comes from the sample Stripe provides with its checkout tutorial.

Some notes about this code:

  • I use jQuery here for simplicity in getting/setting field values, but you don't have to.
  • Use your own Live or Test public key from Stripe
  • The hidden question 'token' is created to hold the token from stripe once the credit card is validated.
  • We hard coded the price (var price = 15000;) and the description (var desc = "Kinetic Training 2017"). You can pass these as variables from your form using the K operator.
<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
  $( function(){
    var handler = StripeCheckout.configure({
         key: 'pk_test_WjgwYourOwnTestPublicKey',
         image: 'https://my.example.com/images/mysquarelogo.png',
         token: function(token) {
            K('field[token]').value(token.id);
            K('form').submitPage();
         },
        name: 'Title For Stripe Dialog'
     });
    $('#stripe-buy').on('click', function(e) {
        var email_addr = K('field[Email]').value();
        var price = 150000;
        var desc = "Kinetic Training 2017"
        var cc = K('field[Payment Choice]').value(); 
        
        if (cc == 'Purchase Order') {
            K('form').submitPage();
        }
        else {
            handler.open({
                description: desc,
                amount: price,
                email: email_addr,
                allowRememberMe:false
         });
         e.preventDefault();
       }
    });
    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
  });
</script>

 

Submit the charge to Stripe

Remember, after a user enters their card information the charge has not yet gone through.  It is not until the Task Handler sends the complete charge call on the server side does the credit card get processes. 

  1. First import the Stripe Complete Checkout handler into your Kinetic Task environment (Task 3 or Task 4)
  2. Configure the handler as you would any other including your private key viewable in the first step including adding a category.
  3. Create a Task tree related to your Kinetic Request form that triggers on complete. 
  4. Add the Stripe Complete Checkout node into your task tree and map the fields from your form into the fields needed for Stripe including the hidden token/card field.

Screen Shot 2014-12-14 at 10.46.19 PM.png

Testing & Production

You can continue to use Stripe's Test service as long as needed.  You do not need to run real credit cards through, rather Stripe has a set of credit card numbers to test different scenarios you may encounter such as a successful transaction, a credit card denied, invalid zip code, etc.  Like the other sections, Stripe has great documentation on testing.

Once you are happy with your testing you can toggle the switch on your account to "Live" and you're ready to collect credit cards.  A couple of final notes:

  • Stripe has logs on both transactions (raw requests/responses) along with charges which makes troubleshooting a lot easier.
  • Remember to update the Public Key on the javascript and the Private Key in the handler with your production keys.  
  • Remember your form should use SSL (https).  

Have fun!