Stripe 'card-element' не виден (Python/Django)

Это мой первый раз, когда я использую этот сайт, чтобы задать вопрос. Буду благодарен за помощь, сегодня я должен сдать эту часть проекта как часть моего курса :(

Я следую этому учебнику: https://www.youtube.com/watch?v=ncsCnC3Ynlw (глава: элементы полос)

Когда я посещаю страницу оформления заказа, элемент карты не отображается.

Я нахожусь на этапе около 3:45:00, и когда смотрю на кассу, div для элемента карты - это просто тонкая пустая полоска.

Может ли кто-нибудь помочь мне найти, где я допустил ошибку? Я думаю, что это может быть связь между скриптом и шаблоном или просто сам скрипт, но я схожу с ума, пытаясь понять, что я сделал неправильно.

Мой views.py:

def BasketView(request):
    carrinho = Carrinho(request)
    total = str(carrinho.gettotal())
    total = total.replace('.', '')
    total = int(total)
    stripe.api_key='sk_test_[...]'
    intent = stripe.PaymentIntent.create(
        amount=total,
        currency='brl',
        metadata={'integration_check': 'accept_a_payment', 'userid': request.user.id}
    )
    return render(request, 'pedido/pedido_novo.html', {'client_secret': intent.client_secret})

Мой html-шаблон:

и, наконец, мой сценарий, 

var stripe = Stripe('pk_test_[...]');

var elem = document.getElementById('submit');
clientsecret = elem.getAttribute('data-secret');

var elements = stripe.elements();
var style = {
base: {
  color: "#000",
  lineHeight: '2.4',
  fontSize: '16px'
    }
};

var card = elements.create("card", { style: style });
card.mount("#card-element");

card.on('change', function(event) {
var displayError = document.getElementById('card-errors')
if (event.error) {
  displayError.textContent = event.error.message;
  $('#card-errors').addClass('alert alert-info');
} else {
  displayError.textContent = '';
  $('#card-errors').removeClass('alert alert-info');
}
});

Я разобрался с этим. Оставляю это здесь для других тупиц вроде меня.

Не добавляйте файл .js в верхнюю часть страницы. Добавьте его в самый низ, после тега /body. Оказывается, значения будут NULL, если javascript загрузится раньше страницы.

Код на Python выглядит корректно, по крайней мере, так выглядит в моей рабочей интеграции с использованием Django. Итак, вот пара вещей, которые можно попробовать:

  1. Вам не нужен clientSecret до тех пор, пока вы не используете stripe.confirmCardPayment(), поэтому пока не берите его.
  2. Попробуйте поместить data-secret="{{client_secret}}" на элемент <form>. В любом случае вам нужно будет добавить слушателя событий на событие <form> в "submit", чтобы предотвратить отправку по умолчанию и вызвать подтверждение, так что лучше получить client_secret тогда.

Я знаю, что это не дает ответа на вопрос, почему кнопка не была выбрана, но, по крайней мере, это дает вам некоторые следующие шаги.

Вернуться на верх