Accepting Credit Card Payments with Stripe

Handlers Needed

• Stripe Complete Checkout

Form Elements

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

Steps

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.

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.

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!