Почему поля оплаты карточкой пусты? - PullRequest
Новая
       42

Почему поля оплаты карточкой пусты?

0 голосов
/ 23 февраля 2019

Я создаю покупки в Интернете, и пользователи должны оплачивать свои заказы с помощью кредитной карты.Итак, я создал учетную запись песочницы, чтобы протестировать API Braintree, установить Braintree и выполнить полную настройку, как показано в файлах python ниже.Но, как вы можете заметить на рисунке 3, информационная структура карты отображается только с метками карты, но есть поля с номером карты, Cvv и датой истечения срока действия карты.

Credit card payment

Payment / views.py: 

import braintree
from django.shortcuts import render, redirect, get_object_or_404
from orders.models import Order
def payment_process(request):
    order_id = request.session.get('order_id')
    order = get_object_or_404(Order, id=order_id)
    if request.method == 'POST':
        # retrieve nonce
        nonce = request.POST.get('payment_method_nonce', None)
        # create and submit transaction
        result = braintree.Transaction.sale({
        'amount': '{:.2f}'.format(order.get_total_cost()),
        'payment_method_nonce': nonce,
        'options': {
        'submit_for_settlement': True
        }
        })
        if result.is_success:
            # mark the order as paid
            order.paid = True
            # store the unique transaction id
            order.braintree_id = result.transaction.id
            order.save()
            return redirect('payment:done')
        else:
            return redirect('payment:canceled')
    else:
        # generate token
        client_token = braintree.ClientToken.generate()
        return render(request,
                      'payment/process.html',
                     {'order': order,
                      'client_token': client_token})

def payment_done(request):
    return render(request, 'payment/done.html')

def payment_canceled(request):
    return render(request, 'payment/canceled.html')

После нажатия кнопки «Оформить заказ» я ожидал получитьформа, как показано ниже, но, к сожалению, у меня есть форма без полей.Это шаблон, который отображает форму оплаты и обрабатывает: 

{% extends "base.html" %}
{% block title %}Pay by credit card{% endblock %}
{% block content %}
<h1>Pay by credit card</h1>
<form action="." id="payment" method="post">
    <label for="card-number">Card Number</label>
    <div id="card-number" class="field"></div>
    <label for="cvv">CVV</label>
    <div id="cvv" class="field"></div>
    <label for="expiration-date">Expiration Date</label>
    <div id="expiration-date" class="field"></div>
    <input type="hidden" id="nonce" name="payment_method_nonce" value="">
    {% csrf_token %}
    <input type="submit" value="Pay">
</form>
<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/3.29.0/js/client.min.js">
</script>
<!-- Load Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/3.29.0/js/hostedfields.min.js"></script>
<script>
    var form = document.querySelector('#payment');
    var submit = document.querySelector('input[type="submit"]');
    braintree.client.create({
    authorization: '{{ client_token }}'
    }, function (clientErr, clientInstance) {
    if (clientErr) {
        console.error(clientErr);
    return;
    }
    braintree.hostedFields.create({
        client: clientInstance,
        styles: {
            'input': {'font-size': '13px'},
            'input.invalid': {'color': 'red'},
            'input.valid': {'color': 'green'}
        },
        fields: {
            number: {selector: '#card-number'},
            cvv: {selector: '#cvv'},
            expirationDate: {selector: '#expiration-date'}
            }
    }, function (hostedFieldsErr, hostedFieldsInstance) {
        if (hostedFieldsErr) {
        console.error(hostedFieldsErr);
        return;
    }
    submit.removeAttribute('disabled');
    form.addEventListener('submit', function (event) {
        event.preventDefault();
        hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
            if (tokenizeErr) {
                console.error(tokenizeErr);
                return;
        }
            // set nonce to send to the server
            document.getElementById('nonce').value = payload.nonce;
            // submit form
            document.getElementById('payment').submit();
            });
            }, false);
        });
    });
</script>
{% endblock %}

Card expected form

Как я могу получить «пустую информацию о корзине» и даже не иметьполя карт, пока я разместил заказ?Спасибо

...