7
Şerit ödemeyi kullanmanın gerçekten basit bir örneğini oluşturmaya çalışıyorum. Bu Bu i dayanarak javascript konsoldaŞerit ödeme örneği görüntülenmiyor
Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
at new t (js.stripe.com/:1)
at t.value (js.stripe.com/:1)
var hatadır ben Stripe
gelen örneği takip
// Create a Stripe client
var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE');
// 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',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.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);
}
});
});.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://js.stripe.com/v3/"></script>
<title>test</title>
</head>
<body>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<button>Submit Payment</button>
</form>
</body>
</html>benim PHP dosyasıdır hata, sanırım js js # kart-elementini bulamadı. Ama orada.
Bu bir dökümü sorun olabilir: D ancak bu ilk defa şerit kullanıyorum, bu yüzden birisi bana yardım ederse harika olur. Çok teşekkürler.
gibi, gelen html sonra komut var mı atmak? Kodunuza bakmadan hala 'stripeTokenHandler' (result.token) tarafından başvurulan şekilde 'stripeTokenHandler' öğesini tanımlamanız gerekiyor gibi görünüyor, --- --- burada bir örnek var https://stripe.com/docs/elements#submit-token – duck
@duck Sadece örneklerini tam olarak takip ettim. Mesajımı düzenledim, hataları görebiliyorum. Çok fazla – trinhdh
hmm, 'no DOM öğesi' hatası alıyorsanız, evet, JS'yi sayfada # kart-öğesi var olmadan önce yüklediğinize benziyor. Burada bir örneğe bakın http://jsbin.com/dukecivela/edit?html, çıkış – duck