Stripe

Quform WordPress v2 DocumentationGuidesAdvancedStripe

Quform Stripe example

We hope to have a Stripe add-on 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
54
55
56
57
58
59
60
61

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 (e) {
            e.preventDefault();
 
            if ($cardElement.closest('.quform-element-page').hasClass('quform-current-page')) {
                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();
                    }
                });
            } else {
                $form.data('quform').submit();
            }
        });
 
        $form.on('quform:successStart', function () {
            card.clear();
        });
    }
});
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 (e) {
            e.preventDefault();

            if ($cardElement.closest('.quform-element-page').hasClass('quform-current-page')) {
                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();
                    }
                });
            } else {
                $form.data('quform').submit();
            }
        });

        $form.on('quform:successStart', function () {
            card.clear();
        });
    }
});

Step 3

Download the quform-stripe plugin zip file. Unzip the file and open the quform-stripe/quform-stripe.php file in a text editor, then make the following changes.

  • On line 9, replace the number 1 with the form ID
  • On line 32, replace sk_test_key with your Stripe Secret key (get it from https://dashboard.stripe.com/account/apikeys)
  • On line 36, replace 2000 with the amount to charge in the currency’s smallest unit (e.g. cents)
  • On line 37, replace usd with the currency code (see https://stripe.com/docs/currencies)
  • On line 38, replace Example product the description for this charge
  • On line 41, replace 1_3 with the Email element unique ID (to associate the customer email address with the payment)

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.

Show legacy instructions

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
35
36
37
3839
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<?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'],
            'metadata' => [
                'customer_email' => $form->getValueText('quform_1_3')
            ]
        ]);
    } 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'],
            'metadata' => [
                'customer_email' => $form->getValueText('quform_1_3')
            ]
        ]);
    } 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 38, 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
  • On line 21, replace 1_3 with the Email element unique ID (to associate the customer email address with the payment)

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.

Using the Stripe PaymentIntents API

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
7

<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" class="quform-field-text"></div>
<div id="card-errors" role="alert" style="color:#c73412;"></div>
<input type="hidden" id="stripe_payment_method_id" name="stripe_payment_method_id">
<input type="hidden" id="stripe_payment_intent_id" name="stripe_payment_intent_id">
<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" class="quform-field-text"></div>
<div id="card-errors" role="alert" style="color:#c73412;"></div>
<input type="hidden" id="stripe_payment_method_id" name="stripe_payment_method_id">
<input type="hidden" id="stripe_payment_intent_id" name="stripe_payment_intent_id">

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

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 (e) {
            e.preventDefault();
 
            if ($cardElement.closest('.quform-element-page').hasClass('quform-current-page')) {
                stripe.createPaymentMethod({ type: 'card', card: 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('#stripe_payment_method_id').val(result.paymentMethod.id);
                        $form.data('quform').submit();
                    }
                });
            } else {
                $form.data('quform').submit();
            }
        });
 
        $form.on('quform:errorEnd', function (e, form, response) {
            if(response.requires_action && response.payment_intent_client_secret && response.requires_action === 'handleCardAction') {
                stripe.handleCardAction(response.payment_intent_client_secret).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('#stripe_payment_intent_id').val(result.paymentIntent.id);
                        $form.data('quform').submit();
                    }
                });
            }
        });
 
        $form.on('quform:successStart', function () {
            $form.find('#stripe_payment_method_id').val('');
            $form.find('#stripe_payment_intent_id').val('');
            card.clear();
        });
    }
});
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 (e) {
            e.preventDefault();

            if ($cardElement.closest('.quform-element-page').hasClass('quform-current-page')) {
                stripe.createPaymentMethod({ type: 'card', card: 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('#stripe_payment_method_id').val(result.paymentMethod.id);
                        $form.data('quform').submit();
                    }
                });
            } else {
                $form.data('quform').submit();
            }
        });

        $form.on('quform:errorEnd', function (e, form, response) {
            if(response.requires_action && response.payment_intent_client_secret && response.requires_action === 'handleCardAction') {
                stripe.handleCardAction(response.payment_intent_client_secret).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('#stripe_payment_intent_id').val(result.paymentIntent.id);
                        $form.data('quform').submit();
                    }
                });
            }
        });

        $form.on('quform:successStart', function () {
            $form.find('#stripe_payment_method_id').val('');
            $form.find('#stripe_payment_intent_id').val('');
            card.clear();
        });
    }
});

Step 3

Download the quform-stripe plugin zip file. Unzip the file and open the quform-stripe/quform-stripe.php file in a text editor, then make the following changes.

  • On line 9, replace the number 1 with the form ID
  • On line 33, replace sk_test_key with your Stripe Secret key (get it from https://dashboard.stripe.com/account/apikeys)
  • On line 41, replace 2000 with the amount to charge in the currency’s smallest unit (e.g. cents)
  • On line 42, replace usd with the currency code (see https://stripe.com/docs/currencies)
  • On line 43, replace Example product the description for this charge
  • On lines 48 and 50, replace 1_3 with the Email element unique ID (to associate the customer email address with the payment)

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.

Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy