#php #laravel #stripe-payments #laravel-blade
Вопрос:
Я пытаюсь интегрировать платежную платформу Stripe со своей веб-страницей Laravel. По какой-то причине div элемента карты не распространяется с элементами полосы. Вот фрагмент моего кода тела:
<div class="checkout-section">
<div>
<form action="#" method="POST" id="payment-form">
{{ csrf_field() }}
<h2>Billing Details</h2>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" name="address" value="{{ old('address') }}" required>
</div>
<div class="half-form">
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" name="city" value="{{ old('city') }}" required>
</div>
<div class="form-group">
<label for="province">Province</label>
<input type="text" class="form-control" id="province" name="province" value="{{ old('province') }}" required>
</div>
</div> <!-- end half-form -->
<div class="half-form">
<div class="form-group">
<label for="postalcode">Postal Code</label>
<input type="text" class="form-control" id="postalcode" name="postalcode" value="{{ old('postalcode') }}" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" value="{{ old('phone') }}" required>
</div>
</div> <!-- end half-form -->
<div class="spacer"></div>
<h2>Payment Details</h2>
<div class="form-group">
<label for="name_on_card">Name on Card</label>
<input type="text" class="form-control" id="name_on_card" name="name_on_card" value="">
</div>
<div class="form-group">
<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" role="alert"></div>
</div>
<div class="spacer"></div>
<button type="submit" id="complete-order" class="button-primary full-width">Complete Order</button>
</form>
</div>
Ближе к концу моего кода:
<script src="https://js.stripe.com/v3/">
(function(){
// Create a Stripe client
var stripe = Stripe({{config('stripe.key)}});
// 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: '18px',
fontFamily: '"Roboto", 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,
hidePostalCode: true
});
// 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();
// Disable the submit button to prevent repeated clicks
document.getElementById('complete-order').disabled = true;
var options = {
name: document.getElementById('name_on_card').value,
address_line1: document.getElementById('address').value,
address_city: document.getElementById('city').value,
address_state: document.getElementById('province').value,
address_zip: document.getElementById('postalcode').value
}
stripe.createToken(card, options).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;
// Enable the submit button
document.getElementById('complete-order').disabled = false;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
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();
}
})();
Инструменты разработчика Chrome -> консоль в нем ничего не отображается.
Изменить: Я подтвердил, что ключ извлекается путем сброса значения.
Комментарии:
1. Я думаю, что ваш ключ с полосой должен быть указан в кавычках? Вы проверили консоль devtools на наличие ошибок? Кстати, вероятно, именно так вы его назвали, но —
STRIPE_SECRET
должен быть ваш общедоступный ключ, а не ваш секретный ключ!2. @Don’Tp, я исправил его на STRIPE_KEY . Блейд извлекает это значение из моего файла .env. Я также изменил его на конфигурацию («stripe.key»), чтобы соответствовать рекомендациям Laravel. В моей консоли devtools по-прежнему ничего нет.
3. @Don’tp. Я понимаю, что ты имел в виду… Мне нужны были кавычки вокруг ключа… Спасибо, что указали на это, это в значительной степени решило мою проблему.
4. Рад, что ты решил эту проблему. Поскольку это была в основном опечатка, я предлагаю закрыть ее как таковую. Кстати, если этот код действовал в любое время, даже на короткое время, и ваш секретный полосатый ключ был раскрыт, вы должны немедленно повернуть этот ключ.