我正在尝试使用条纹卡元素示例。当我通过表单时，只需通过$ _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 Index.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();
}
}
最后在我的Class stripe2函数createCharge2（）
public function createCharge2()
{
\Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXX");
print_r($_POST);
exit();
结果
Array（[stripeToken] => tok_1ENZWMEZa7Hruxtoa50HvXXXX）
我希望$ _POST中的表格和令牌的数据
答案 0 :(得分：1)
阻止获取这些参数的是您的JavaScript代码。您致电
disableInputs();
但是只有在令牌调用失败时才能再次启用它们。
POST参数将仅从启用（而不是禁用）的输入发送。如果您在获得令牌后在if / else代码中再次启用了它们，它将可以正常工作。