问题描述
我正在建立一个自定义结帐，Stripe在其中处理付款信息。我正在使用Stripe Elements Library。当我使用测试可发布密钥时，我即将获得带有令牌的输入，但是一旦我切换到实时密钥，这种情况就不再发生了。我不确定我的设置中是否缺少某些功能，这些功能不允许在激活动态键时生成令牌。
这是我与Stripe Elements集成的Javascript
<script src="https://js.stripe.com/v3/"></script>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_live_xxxxxxxxxxxxxx');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',fontFamily: '"Helvetica Neue",Helvetica,sans-serif',fontSmoothing: 'antialiased',fontSize: '16px','::placeholder': {
color: '#aab7c4'
},':focus': {
color: '#333',},'::placeholder': {
color: '#333',':focus::placeholder': {
color: '#333',invalid: {
color: '#DC5B5B',iconColor: '#DC5B5B',':focus': {
color: '#DC5B5B','::placeholder': {
color: '#DC5B5B',}
};
var elementClasses = {
focus: 'focus',empty: 'empty',invalid: 'invalid',};
// Create an instance of the card Element.
var cardNumber = elements.create('cardNumber',{
style: style,classes: elementClasses,});
cardNumber.mount('#example3-card-number');
var cardExpiry = elements.create('cardExpiry',});
cardExpiry.mount('#example3-card-expiry');
var cardCvc = elements.create('cardCvc',});
cardCvc.mount('#example3-card-cvc');
registerElements([cardNumber,cardExpiry,cardCvc],'example3');
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='tel']"
),function(input) {
input.setAttribute('disabled','true');
}
);
}
function triggerbrowserValidation() {
// The only way to trigger HTML5 form validation UI is to fake a user submit
// event.
var submit = document.createElement('input');
submit.type = 'submit';
submit.style.display = 'none';
form.appendChild(submit);
submit.click();
submit.remove();
}
// Listen for errors from each Element,and show error messages in the UI.
var savedErrors = {};
elements.forEach(function(element,idx) {
element.on('change',function(event) {
if (event.error) {
error.classList.add('visible');
savedErrors[idx] = event.error.message;
errorMessage.innerText = event.error.message;
} else {
savedErrors[idx] = null;
// Loop over the saved errors and find the first one,if any.
var nextError = Object.keys(savedErrors)
.sort()
.reduce(function(maybeFoundError,key) {
return maybeFoundError || savedErrors[key];
},null);
error.classList.remove('visible');
if (nextError) {
// Now that they've fixed the current error,show another one.
errorMessage.innerText = nextError;
error.classList.add('visible');
} else {
// The user fixed the last error; no more errors.
error.classList.remove('visible');
}
}
});
});
// Listen on the form's 'submit' handler...
form.addEventListener('submit',function(e) {
e.preventDefault();
// Trigger HTML5 validation UI on the form if any of the inputs fail
// validation.
var plainInputsValid = true;
Array.prototype.forEach.call(form.querySelectorAll('input'),function(
input
) {
if (input.checkValidity && !input.checkValidity()) {
plainInputsValid = false;
return;
}
});
if (!plainInputsValid) {
triggerbrowserValidation();
return;
}
// 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) {
stripetokenHandler(result.token)
} else {
// Otherwise,un-disable inputs.
enableInputs();
}
});
});
}
// Submit the form with the token ID.
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);
}
除了我的代码正是我拥有测试键时发现并使用的代码之外，我在首次实现该代码时仅对上面的Javascript代码进行了微小的更改。
我对Stripe的元素库不是很熟悉，因此不胜感激。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）