Try to search your question here, if you can't find : Ask Any Question Now ?

Structuring my Axios POST request to send my Django Rest Framework Stripe form data

HomeCategory: stackoverflowStructuring my Axios POST request to send my Django Rest Framework Stripe form data
Avatarkundan asked 5 days ago

I am working with default Stripe code to generate a Token that proves the payment form was successfully submitted. I’ll post the code below for clarity within this post.

I’m able to see the token if I console.log(token), but my server (Django Rest Framework) is giving me a 500 error with django.utils.datastructures.MultiValueDictKeyError: 'stripeToken'
.

From my limited research, this is saying the request.POST doesn’t see a key of stripeToken.

Do you think this is an error on how my server is handling this, or could I have written some incorrect Javascript?

Here is my VueJS code:

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);
            });
        }
      }
    }

Here is my DRF view:

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')
1 Answers
Best Answer
AvatarAmit answered 5 days ago
Your Answer

6 + 15 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com