Создание функции просмотра, которая заряжает карту, используя уже успешно созданный токен с stripe.js - PullRequest
Новая
       9

Создание функции просмотра, которая заряжает карту, используя уже успешно созданный токен с stripe.js

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

Я использую элементы полосы из официальной документации для создания токена.Сейчас я пытаюсь создать функцию списания в моем view.py для снятия средств с кредитной карты.Но как мне правильно получить токен из stripe.js в моем views.js, потому что "request.POST.get ('stripeToken'):" не работает в моем коде.

Я пытаюсьнастроить форму регистрации пользователя в django, где пользователь должен платить единовременную плату при регистрации (без сохранения токена для повторяющихся платежей).Сейчас я пытаюсь создать функцию зарядки в моем views.py, которая заряжает карту уже успешно созданным токеном.Причина, по которой я хочу использовать элементы stripe с stripe.js - это красивая форма.Я относительно новичок в этой среде и из-за этого я не знаю, как дальше.Спасибо за вашу помощь уже заранее! 

views.py

import stripe

def charge(request):
    # Set your secret key: remember to change this to your live secret key in production
    # See your keys here: https://dashboard.stripe.com/account/apikeys
    stripe.api_key = "sk_test_..."

    # Token is created using Checkout or Elements!
    # Get the payment token ID submitted by the form:
    if request.POST.get('stripeToken'):
        print(request.POST)
        token = request.POST.get('stripeToken')

        charge = stripe.Charge.create(
            amount=999,
            currency='usd',
            description='Boosted Post',
            source=token,
        )
        print('Charge:', charge)
        return HttpResponseRedirect('/')
    else:
        print('NO')

    context = {
        'amount': 999,
    }

    return render(request, 'subscribers/subscriber_new.html', context)


subscriber_new.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/stripe.css' %}">
</head>
<body>
  <form action="" method="POST">{% csrf_token %}
    <label>
      <div id="card-element" class="field is-empty"></div>
      <span><span>Credit or debit card</span></span>
    </label>
    <button type="submit">Pay $25</button>
    <div class="outcome">
      <div class="error" role="alert"></div>
      <div class="success">
        Success! Your Stripe token is <span class="token"></span>
      </div>
    </div>
    </form>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{% static 'js/stripe.js' %}"></script>
</body>
</html>


stripe.js

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

var card = elements.create('card', {
  iconStyle: 'solid',
  style: {
    base: {
      iconColor: '#8898AA',
      color: 'white',
      lineHeight: '36px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '19px',

      '::placeholder': {
        color: '#8898AA',
      },
    },
    invalid: {
      iconColor: '#e85746',
      color: '#e85746',
    }
  },
  classes: {
    focus: 'is-focused',
    empty: 'is-empty',
  },
});
card.mount('#card-element');

var inputs = document.querySelectorAll('input.field');
Array.prototype.forEach.call(inputs, function(input) {
  input.addEventListener('focus', function() {
    input.classList.add('is-focused');
  });
  input.addEventListener('blur', function() {
    input.classList.remove('is-focused');
  });
  input.addEventListener('keyup', function() {
    if (input.value.length === 0) {
      input.classList.add('is-empty');
    } else {
      input.classList.remove('is-empty');
    }
  });
});

function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // Use the token to create a charge or a customer
    // https://stripe.com/docs/charges
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');
  } 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 form = document.querySelector('form');
  stripe.createToken(card).then(setOutcome);
});

После того, как токен уже успешно создан и также виден на приборной панели полосы, функция зарядки должна получить токен и успешно зарядить карту.Но на самом деле консоль напрямую отображает напечатанное «Нет», и браузер мгновенно перенаправляет на страницу home.html, даже не показывая файл subscriber_new.html, который мог прежде успешно сгенерировать токен без функции зарядки в файле views.py

...