Я использую платежный шлюз Stripe connect. Я хочу отправить пользовательские значения в форму заказа, для которых я использовал полосу js-элемента с кнопкой оплаты. На панели мониторинга Stripe Connect отображается токен v1 /, а в тестовом режиме платеж не отображается.Могу ли я вызвать метод оплаты с этим элементом JS для живого, а также живого режима.
<script src="https://js.stripe.com/v3/"></script>
<form>
<div class="form-group">
<h2 class="heading">Schedule Course</h2>
<label for="name">Tutor Name: </label>
<input type="text" name="selectedTutor" value="<?php echo $tutorName;?>" required>
<label for="phone">Subject</label>
<input type="text" name="slectedSubject" value="<?php echo get_user_meta($userId, 'userinfo' , true );?>" id="selectedSubject" required>
<label for="email">Booking Dates</label>
<input type="text" name="slectedDates" value="" id="selectedAppointment" required>
<label for="email">Price</label>
<input type="text" name="slectedDates" value="<?php echo get_user_meta( $userId, 'price_individualcourse' , true);?>" id="selectedAppointment" required>
<label>
<input name="cardholder-name" class="field is-empty" placeholder="Jane Doe" />
<span><span>Name</span></span>
</label>
<label>
<div id="card-element" class="field is-empty"></div>
<span><span>Credit or debit card</span></span>
</label>
<button type="submit">Pay <?php echo get_user_meta( $userId, 'price_individualcourse' , true);?></button>
<div class="outcome">
<div class="error" role="alert"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>
<script>
var stripe = Stripe('pk_test_uFOdE1YPIXhbssFt1FwH9RGQ');
var elements = stripe.elements();
var card = elements.create('card', {
iconStyle: 'solid',
style: {
base: {
iconColor: '#8898AA',
color: 'black',
lineHeight: '36px',
fontWeight: 300,
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSize: '19px',
'::placeholder': {
color: '#8898AA',
},
},
invalid: {
iconColor: '#e85746',
color: '#e85746',
}
},
classes: {
focus: 'is-focused',
empty: 'is-empty',
},
});
card.mount('#card-element');
var inputs = document.querySelectorAll('input.field');
Array.prototype.forEach.call(inputs, function(input) {
input.addEventListener('focus', function() {
input.classList.add('is-focused');
});
input.addEventListener('blur', function() {
input.classList.remove('is-focused');
});
input.addEventListener('keyup', function() {
if (input.value.length === 0) {
input.classList.add('is-empty');
} else {
input.classList.remove('is-empty');
}
});
});
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
var form = document.querySelector('form');
var extraDetails = {
name: form.querySelector('input[name=cardholder-name]').value,
};
stripe.createToken(card, extraDetails).then(setOutcome);
});
</script>