[英]how can I migrate from stripe checkout.js to stripe elements?
I am trying to use my own custom checkout form using elements, and merging my ajax function where it uses StripeCheckout.configure
to process the payment, but I want to make a highly customizable checkout form .我正在尝试使用元素使用我自己的自定义结帐表单,并合并我的 ajax 函数,它使用
StripeCheckout.configure
来处理付款,但我想制作一个高度可定制的结帐表单。 I found a way to do it this via elements where I have the following:我找到了一种通过元素来做到这一点的方法,其中我有以下内容:
<script src="https://js.stripe.com/v3/"></script>
<body>
<form action="//httpbin.org/post" method="POST">
<input type="hidden" name="token" />
<div class="group">
<label>
<span>Card number</span>
<div id="card-number-element" class="field"></div>
</label>
<label>
<span>Expiry date</span>
<div id="card-expiry-element" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc-element" class="field"></div>
</label>
<label>
<span>Postal code</span>
<input id="postal-code" name="postal_code" class="field" placeholder="Regular field placeholder" />
</label>
</div>
<button type="submit">Pay $25</button>
<div class="outcome">
<div class="error"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>
<script>
var stripe = Stripe('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
var elements = stripe.elements();
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
};
var cardNumberElement = elements.create('cardNumber', {
style: style,
placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');
var cardExpiryElement = elements.create('cardExpiry', {
style: style,
placeholder: 'Custom expiry date placeholder',
});
cardExpiryElement.mount('#card-expiry-element');
var cardCvcElement = elements.create('cardCvc', {
style: style,
placeholder: 'Custom CVC placeholder',
});
cardCvcElement.mount('#card-cvc-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// In this example, we're simply displaying the token
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
// In a real integration, you'd submit the form with the token to your backend server
var form = document.querySelector('form');
form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
form.submit();
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
cardNumberElement.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
var options = {
address_zip: document.getElementById('postal-code').value,
};
stripe.createToken(cardNumberElement, options).then(setOutcome);
});
</script>
</body>
I want to integrate the following ajax - stripe without elements doing the same , but using the elements version.我想集成以下 ajax-stripe 没有元素做同样的事情,但使用元素版本。
<form action="{% url 'payments' %}" method="post">
{% csrf_token %}
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
CSRF_TOKEN = document.getElementsByName("csrfmiddlewaretoken")[0].value;
var handler = StripeCheckout.configure({
key: '{{ key }}',
locale: 'auto',
token: function(token) {
$('.notification-success-wrapper').css('display', 'none');
$('.notification-danger-wrapper').css('display', 'none');
$.ajax({
url: "{% url 'payments' %}",
method: 'POST',
data: JSON.stringify({
token: token.id,
amount: {{ amount }},
description: "{{ description }}",
}),
headers: {'X-CSRFToken': CSRF_TOKEN},
})
.done((res) => {
console.log(res)
})
.fail((err) => {
console.log(err)
});
},
allowRememberMe: false
});
document.getElementById('purchase-btn').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: "demoo",
description: "{{ description }}",
amount: {{ amount }}
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
</form>
您在旧版 Checkout token
回调中进行的 AJAX 调用,您需要在setOutcome
函数中进行相同的调用,其中有result.token
并相应地修改它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.