Accepting Credit Card Payments with Stripe
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
-
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.
-
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.
-
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
- Visit https://stripe.com and register for a new account
- 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.
- Go to the sidebar and select API.
- 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.
- First import the Stripe Complete Checkout handler into your Kinetic Task environment (Task 3 or Task 4)
- Configure the handler as you would any other including your private key viewable in the first step including adding a category.
- Create a Task tree related to your Kinetic Request form that triggers on complete.
- 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!