Форма оплаты в полоску не работает на Django, не может получить токен - PullRequest
Новая
       7

Форма оплаты в полоску не работает на Django, не может получить токен

0 голосов
/ 28 июня 2018

Я пытаюсь добавить страницу оплаты на свой сайт, я скопировал код из документации полосы, однако, когда я нажимаю на кнопку оплаты, ничего не происходит. В результате отладки возвращенный токен пуст. Дело в том, что когда я пробовал код в JsFiddle, он работал, но когда я добавляю его в свое приложение, ответа нет, консоль пуста, поэтому я теряюсь в устранении неполадок. Вот HTML-файл: 

{% block content %}
<form   method="POST" id="payment-form" >
{% csrf_token %}
  <input type="hidden" name="token" />
    <div class="group">
      <label>
        <span>Card</span>
        <div id="card-element" class="field"></div>
          <div id="card-errors" role="alert"></div>
      </label>
    </div>
    <div class="group">
      <label>
        <span>Name</span>
        <input id="name" name="name" class="field" placeholder="Jane Doe" />
      </label>
    </div>
    <div class="group">
      <label>
        <span>Address</span>
        <input id="address-line1" name="address_line1" class="field" placeholder="77 Winchester Lane" />
      </label>
      <label>
        <span>Address (cont.)</span>
        <input id="address-line2" name="address_line2" class="field" placeholder="" />
      </label>
      <label>
        <span>City</span>
        <input id="address-city" name="address_city" class="field" placeholder="Coachella" />
      </label>
      <label>
        <span>State</span>
        <input id="address-state" name="address_state" class="field" placeholder="CA" />
      </label>
      <label>
        <span>ZIP</span>
        <input id="address-zip" name="address_zip" class="field" placeholder="92236" />
      </label>
      <label>
        <span>Country</span>
        <input id="address-country" name="address_country" class="field" placeholder="United States" />
      </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>




{% endblock %}

{% block body_scripts %}
<script >
var stripe = Stripe('stripeKeyGoesHere');
var elements = stripe.elements();

var card = elements.create('card', {
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: 'Helvetica Neue',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
card.mount('#card-element');

function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');
console.log(result);
  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');
  }
}

card.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var options = {
    name: document.getElementById('name').value,
    address_line1: document.getElementById('address-line1').value,
    address_line2: document.getElementById('address-line2').value,
    address_city: document.getElementById('address-city').value,
    address_state: document.getElementById('address-state').value,
    address_zip: document.getElementById('address-zip').value,
    address_country: document.getElementById('address-country').value,
  };
  stripe.createToken(card, options).then(setOutcome);
});

</script>

и вот вид: 

def payments(request):
    if request.user.profile.is_seller is False:
        key = settings.STRIPE_PUBLIC_KEY
        if request.method == 'POST':
            stripe.api_key = settings.STRIPE_SECRET_KEY
            #form = CreateCustomer(request.POST)
            token = request.POST.get('token')
            print(token)
            #if form.is_valid():
                #something
            return render(request, 'payment_card.html', {'key': key})
        else:
            print('it is a get')
            return render(request, 'payment_card.html', {'key':key})

    else:
        raise PermissionDenied

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Проблема так и не была решена, так как я не нашел способа отладки и поиска, где проблема, однако команда Stripe помогла мне создать другую форму, и вот, к счастью, работа с Django 1.11, надеюсь, она поможет кому-то запустить в тот же вопрос: 

var stripe = Stripe('stripe key');
var elements = stripe.elements();

var card = elements.create('card', {
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: 'Helvetica Neue',
      fontSize: '15px',
      border:'2px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
card.mount('#card-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');
  }
}

card.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var options = {
    name: document.getElementById('name').value,
    address_line1: document.getElementById('address-line1').value,
    address_line2: document.getElementById('address-line2').value,
    address_city: document.getElementById('address-city').value,
    address_state: document.getElementById('address-state').value,
    address_zip: document.getElementById('address-zip').value,
    address_country: document.getElementById('address-country').value,
  };
  stripe.createToken(card, options).then(setOutcome);
});
0 голосов
/ 28 июня 2018

Когда вы говорите, что ничего не происходит, когда вы нажимаете кнопку, вы могли бы увидеть, при отладке (с помощью инструментов разработчика браузера?), Действительно ли произошла отправка формы?

Кроме того, можете ли вы попытаться добавить console.log(result) в функцию setOutcome прямо перед if (result.token) { }?

Когда вы отлаживаете код на стороне сервера, видите ли вы свой контроллер / представление / обработчик, т.е. вызывается payments(request) когда отправляется форма? Можете ли вы проверить содержание словаря request.POST?

Идея состоит в том, чтобы проверить, действительно ли выполняется запрос POST при отправке формы (на стороне клиента с использованием инструментов разработки браузера), и действительно ли ваш серверный контроллер действительно принимает / обрабатывает запрос и как выглядит полученный запрос POST (в частности, словарь request.POST).

...