We hope to have a Stripe addon available in the future, for now you can accept Stripe payments from forms using the guide below.
Step 1
Add an HTML element to the form, and in the settings for it enter the following code as the content.
1 2 3 4 5 6 | <div class="quform-label"> <label class="quform-label-text" for="card-element">Credit or debit card<span class="quform-required">*</span></label> </div> <div id="card-element" style="padding:10px 0;"></div> <div id="card-errors" role="alert" style="color:#c73412;"></div> <input type="hidden" id="stripeToken" name="stripeToken"> |
<div class="quform-label"> <label class="quform-label-text" for="card-element">Credit or debit card<span class="quform-required">*</span></label> </div> <div id="card-element" style="padding:10px 0;"></div> <div id="card-errors" role="alert" style="color:#c73412;"></div> <input type="hidden" id="stripeToken" name="stripeToken">
Step 2
Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field add the following code.
1
2
3
4
56
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| jQuery(function ($) { var $cardElement = $('#card-element'); if ($cardElement.length && window.Stripe) { var stripe = Stripe('pk_test_key'); var elements = stripe.elements(); var style = { base: { color: '#32325d', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; var card = elements.create('card', {style: style}); card.mount($cardElement[0]); // Handle real-time validation errors from the card Element. card.addEventListener('change', function (event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); var $form = $cardElement.closest('.quform-form'); $form.off('submit').on('submit', function (event) { event.preventDefault(); stripe.createToken(card).then(function (result) { if (result.error) { // Inform the user if there was an error. var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { $form.find('#stripeToken').val(result.token.id); $form.data('quform').submit(); } }); }); } }); |
jQuery(function ($) { var $cardElement = $('#card-element'); if ($cardElement.length && window.Stripe) { var stripe = Stripe('pk_test_key'); var elements = stripe.elements(); var style = { base: { color: '#32325d', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; var card = elements.create('card', {style: style}); card.mount($cardElement[0]); // Handle real-time validation errors from the card Element. card.addEventListener('change', function (event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); var $form = $cardElement.closest('.quform-form'); $form.off('submit').on('submit', function (event) { event.preventDefault(); stripe.createToken(card).then(function (result) { if (result.error) { // Inform the user if there was an error. var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { $form.find('#stripeToken').val(result.token.id); $form.data('quform').submit(); } }); }); } });
- On line 5, replace
pk_test_key
with your Stripe Publishable key (get it from https://dashboard.stripe.com/account/apikeys)
Step 3
On your computer create a folder named quform-stripe and inside it create a file named quform-stripe.php
Open quform-stripe.php in any text editor and add the following code.
1 2 3 4 5 6 7 8 910 11 1213 14 15 16171819 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3536 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <?php /* * Plugin Name: Quform Stripe * Description: Stripe integration for Quform. * Version: 1.0.0 */ add_filter('quform_post_validate_1', function (array $result, Quform_Form $form) { require_once 'vendor/autoload.php'; \Stripe\Stripe::setApiKey('sk_test_key'); try { \Stripe\Charge::create([ 'currency' => 'usd', 'amount' => 2000, 'description' => 'Example product', 'source' => $_POST['stripeToken'] ]); } catch (Exception $e) { $result = array( 'type' => 'error', 'error' => array( 'enabled' => true, 'title' => '', 'content' => $e->getMessage() ) ); } return $result; }, 10, 2); add_filter('quform_post_set_form_values_1', function (array $result, Quform_Form $form) { if (!isset($_POST['stripeToken']) || ! Quform::isNonEmptyString($_POST['stripeToken'])) { $result = array( 'type' => 'error', 'error' => array( 'enabled' => true, 'title' => '', 'content' => 'Please enter your card details to continue' ) ); // No JS response $form->setConfig(array( 'errorEnabled' => true, 'errorTitle' => '', 'errorContent' => 'Please enable JavaScript and enter your card details to continue' )); } return $result; }, 10, 2); add_action('wp_enqueue_scripts', function () { wp_enqueue_script('stripe', 'https://js.stripe.com/v3/', array(), false, true); }); |
<?php /* * Plugin Name: Quform Stripe * Description: Stripe integration for Quform. * Version: 1.0.0 */ add_filter('quform_post_validate_1', function (array $result, Quform_Form $form) { require_once 'vendor/autoload.php'; \Stripe\Stripe::setApiKey('sk_test_key'); try { \Stripe\Charge::create([ 'currency' => 'usd', 'amount' => 2000, 'description' => 'Example product', 'source' => $_POST['stripeToken'] ]); } catch (Exception $e) { $result = array( 'type' => 'error', 'error' => array( 'enabled' => true, 'title' => '', 'content' => $e->getMessage() ) ); } return $result; }, 10, 2); add_filter('quform_post_set_form_values_1', function (array $result, Quform_Form $form) { if (!isset($_POST['stripeToken']) || ! Quform::isNonEmptyString($_POST['stripeToken'])) { $result = array( 'type' => 'error', 'error' => array( 'enabled' => true, 'title' => '', 'content' => 'Please enter your card details to continue' ) ); // No JS response $form->setConfig(array( 'errorEnabled' => true, 'errorTitle' => '', 'errorContent' => 'Please enable JavaScript and enter your card details to continue' )); } return $result; }, 10, 2); add_action('wp_enqueue_scripts', function () { wp_enqueue_script('stripe', 'https://js.stripe.com/v3/', array(), false, true); });
- On lines 9 and 35, replace the number
1
with the form ID - On line 12, replace
sk_test_key
with your Stripe Secret key (get it from https://dashboard.stripe.com/account/apikeys) - On line 16, set the currency code (see https://stripe.com/docs/currencies)
- On line 17, set the amount to charge in the currency’s smallest unit (e.g. cents)
- On line 18, set the description for this charge
Step 4
We’ll now need to install the PHP library for the Stripe API using Composer. Once you’ve installed composer, open a terminal window (or run cmd on Windows) and navigate to the quform-stripe folder you created in Step 1 then run this command:
composer require stripe/stripe-php
This will install all required files into the vendor folder within the quform-stripe folder.
Finally, upload the quform-stripe folder to the web server at wp-content/plugins then go to the Plugins page within WordPress and activate the plugin Quform Stripe.