将表单传递给控制器

Question

我正在尝试使用条纹卡元素示例。当我通过表单时，只需通过 $_POST 接收 TokenId。我需要传递表单的所有信息。 表单工作并且看起来非常好，但是当我在最后一个函数 stripeTokenHandler(token) 中的 index.js 中发送表单时。 该表格似乎不存在。我一直在旋转，我无法理解。如有任何建议或帮助，我将不胜感激。

传递带有名称的表单。

视图和表单

                    <form action="Stripe2/createCharge2" method="POST" id="payment-form">
                        <div class="fieldset">
                            <input id="example3-name" name="name" data-tid="elements_examples.form.name_label" class="field" type="text" placeholder="Nombre" required="">
                            <input id="example3-email" name="email" data-tid="elements_examples.form.email_label" class="field half-width" type="email" placeholder="Correo electrónico" required="">
                            <input id="example3-phone" name="phone" data-tid="elements_examples.form.phone_label" class="field half-width" type="tel" placeholder="Teléfono" required="">
                        </div>
                        <div class="fieldset">
                            <div id="example3-card-number" class="field empty"></div>
                            <div id="example3-card-expiry" class="field empty half-width"></div>
                            <div id="example3-card-cvc" class="field empty half-width"></div>

                        </div>
                        <button type="submit" data-tid="elements_examples.form.pay_button">Pay $25</button>
                        <div class="error" role="alert"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
                                <path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"></path>
                                <path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"></path>
                            </svg>
                            <span class="message"></span></div>
                 </form>

示例 3 。 JS

(function () {
    'use strict';

    var elements = stripe.elements({
        fonts: [
            {
                cssSrc: 'https://fonts.googleapis.com/css?family=Quicksand',
            },
        ],
        // Stripe's examples are localized to specific languages, but if
        // you wish to have Elements automatically detect your user's locale,
        // use `locale: 'auto'` instead.
        locale: window.es,
    });

    var elementStyles = {
        base: {
            color: '#fff',
            fontWeight: 600,
            fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif',
            fontSize: '16px',
            fontSmoothing: 'antialiased',

            ':focus': {
                color: '#424770',
            },

            '::placeholder': {
                color: '#9BACC8',
            },

            ':focus::placeholder': {
                color: '#CFD7DF',
            },
        },
        invalid: {
            color: '#fff',
            ':focus': {
                color: '#FA755A',
            },
            '::placeholder': {
                color: '#FFCCA5',
            },
        },
    };

    var elementClasses = {
        focus: 'focus',
        empty: 'empty',
        invalid: 'invalid',
    };

    var cardNumber = elements.create('cardNumber', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardNumber.mount('#example3-card-number');

    var cardExpiry = elements.create('cardExpiry', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardExpiry.mount('#example3-card-expiry');

    var cardCvc = elements.create('cardCvc', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardCvc.mount('#example3-card-cvc');

    registerElements([cardNumber, cardExpiry, cardCvc], 'example3');
})();

JS 索引.js

function registerElements(elements, exampleName) {
    var formClass = '.' + exampleName;
    var example = document.querySelector(formClass);

    var form = example.querySelector('form');
    var resetButton = example.querySelector('a.reset');
    var error = form.querySelector('.error');
    var errorMessage = error.querySelector('.message');

    function enableInputs() {
        Array.prototype.forEach.call(
            form.querySelectorAll(
                "input[type='text'], input[type='email'], input[type='tel']"
            ),
            function (input) {
                input.removeAttribute('disabled');
            }
        );
    }

    function disableInputs() {
        Array.prototype.forEach.call(
            form.querySelectorAll(
                "input[type='text'], input[type='email'], input[type='tel']"
            ),
            function (input) {
                input.setAttribute('disabled', 'true');
            }
        );
    }

    // Listen for errors from each Element, and show error messages in the UI.
    elements.forEach(function (element) {
        element.on('change', function (event) {
            if (event.error) {
                error.classList.add('visible');
                errorMessage.innerText = event.error.message;
            } else {
                error.classList.remove('visible');
            }
        });
    });

    // Listen on the form's 'submit' handler...
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        // stripe.createToken(elements[0].then(function(result){
        //     if (resuacalt.error) {
        //         // Inform the user if there was an error.
        //         var errorElement = document.getElementById('card-errors');
        //         errorElement.textContent = result.error.message;
        //         } else {
        //             // Send the token to your server.
        //             stripeTokenHandler(result.token);
        //         }
        //     });
        // });
        // Show a loading screen...
        example.classList.add('submitting');



        // Disable all inputs.
        disableInputs();


        // Gather additional customer data we may have collected in our form.
        var name = form.querySelector('#' + exampleName + '-name');
        var address1 = form.querySelector('#' + exampleName + '-address');
        var city = form.querySelector('#' + exampleName + '-city');
        var state = form.querySelector('#' + exampleName + '-state');
        var zip = form.querySelector('#' + exampleName + '-zip');
        var additionalData = {
            name: name ? name.value : undefined,
            address_line1: address1 ? address1.value : undefined,
            address_city: city ? city.value : undefined,
            address_state: state ? state.value : undefined,
            address_zip: zip ? zip.value : undefined,
        };

        // Use Stripe.js to create a token. We only need to pass in one Element
        // from the Element group in order to create a token. We can also pass
        // in the additional customer data we collected in our form.
        stripe.createToken(elements[0], additionalData).then(function (result) {
            // Stop loading!
            example.classList.remove('submitting');

            if (result.token) {
                // If we received a token, show the token ID.
                stripeTokenHandler(result.token);
                example.querySelector('.token').innerText = result.token.id;
                example.classList.add('submitted');
            } else {
                // Otherwise, un-disable inputs.
                enableInputs();
            }
        });
    });

    resetButton.addEventListener('click', function (e) {
        e.preventDefault();
        // Resetting the form (instead of setting the value to `''` for each input)
        // helps us clear webkit autofill styles.
        form.reset();

        // Clear each Element.
        elements.forEach(function (element) {
            element.clear();
        });

        // Reset error state as well.
        error.classList.remove('visible');

        // Resetting the form does not un-disable inputs, so we need to do it separately:
        enableInputs();
        example.classList.remove('submitted');
    });
    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }
}

最后在我的类 stripe2 函数 createCharge2()

   public function createCharge2()
    {
        \Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXX");

        print_r($_POST);
        exit();

结果

数组（[stripeToken] => tok_1ENZWMEZa7Hruxtoa50HvXXXX）

我期望表单的数据和 $_POST 中的令牌

Answer 1

阻止您获取这些参数的原因在于您的 JavaScript 代码。你打电话给

disableInputs();

但只有在令牌调用失败时才能再次启用它们。

POST 参数只会从启用（而非禁用）的输入发送。如果您在获得令牌后在 if/else 代码中再次启用它们，它将正常工作。