Я пытаюсь использовать Пример элемента Stripe card. Когда я передаю форму, просто получаю $ _POST TokenId. Мне нужно передать всю информацию формы.
Форма работает и выглядит очень хорошо, но когда я отправляю форму в index.js в последней функции stripeTokenHandler (token).
форма, кажется, не там. Я крутился, не могу этого понять. Буду признателен за любое предложение или помощь ..
передать форму с именем.
Вид и форма
<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();
}
}
И, наконец, в моем классе stripe2 функция createCharge2 ()
public function createCharge2()
{
\Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXX");
print_r($_POST);
exit();
Результат
Array ([stripeToken] => tok_1ENZWMEZa7Hruxtoa50HvXXXX)
Я ожидаю данные формы и токена в $ _POST