Stripe

<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">

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();
                }
            });
        });
    }
});

<?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);
});