Структурирование моего POST-запроса Axios для отправки данных формы Stripe Django Rest Framework - PullRequest
Новая
       6

Структурирование моего POST-запроса Axios для отправки данных формы Stripe Django Rest Framework

0 голосов
/ 09 октября 2019

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

Я могу видеть токен, если я console.log(token), но мой сервер (Django Rest Framework) выдает мне ошибку 500 с django.utils.datastructures.MultiValueDictKeyError: 'stripeToken' .

Из моего ограниченного исследования, это говорит о том, что запрос. POST не видит ключ stripeToken.

Считаете ли вы, что это ошибка моего сервера? это, или я мог написать какой-то неправильный Javascript?

Вот мой код VueJS: 

mounted: function () {
      var that = this;
      var stripe = window.Stripe(process.env.STRIPE_PUBLISHABLE_KEY_TEST);
      var elements = stripe.elements();
      var style = {
        base: {
          color: '#32325d',
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSmoothing: 'antialiased',
          fontSize: '16px',
          '::placeholder': {
            color: '#aab7c4'
          }
        },
        invalid: {
          color: '#fa755a',
          iconColor: '#fa755a'
        }
      };
      var card = elements.create('card', {style: style});
      card.mount('#card-element');
      card.addEventListener('change', function (event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
          displayError.textContent = event.error.message;
        } else {
          displayError.textContent = '';
        }
      });
      var form = document.getElementById('payment-form');
      form.addEventListener('submit', function (event) {
        event.preventDefault();
        stripe.createToken(card).then(function (result) {
          if (result.error) {
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
          } else {
            stripeTokenHandler(result.token);
          }
        });
      });

      function stripeTokenHandler(token) {
        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);
        form.submit();
        fetchSomething();

        async function fetchSomething() {
          await that.$axios.$post('charge/', {
            stripeToken: token
          }).then(function (response) {
            console.log(response);
          })
            .catch(function (error) {
              console.log(error);
            });
        }
      }
    }

Вот мой вид DRF: 

import os

import stripe
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt

stripe.api_key = os.environ.get('HOT_WATER_STRIPE_API_KEY')


@csrf_exempt
def charge(request):
    if request.method == 'POST':
        charge = stripe.Charge.create(
            amount=500,
            currency='usd',
            description='A Django charge',
            source=request.POST['stripeToken']
        )
        return render(request, 'charge.html')
...