我目前正在從事一個收集付款資訊（如客戶想要購買的產品，以及該產品的成本）和客戶詳細資訊（客戶姓名、客戶地址、客戶信用卡資訊等）的專案，我需要訪問 Stripe 的在線支付系統進行購買。但是，在我的試運行期間，每次我嘗試點擊所有“支付”時，我都會不斷收到出錯的通知。我檢查了終端，它一直顯示這個錯誤：
Failed to load resource: the server responded with a status of 401 (Unauthorized)
我還在使用 Django 的 rest 框架進行后端開發，并且它一直在顯示這個
HTTP 401 Unauthorized
Allow: POST, OPTIONS
Content-Type: application/json
Vary: Accept
WWW-Authenticate: Token
{
"detail": "Authentication credentials were not provided."
}
這是我認為問題所在的代碼：
<template>
<div class="page-checkout">
<div class="columns is-multiline">
<div class="column is-12">
<h1 class="title">Checkout</h1>
</div>
<div class="column is-12 box">
<table class="table is-fullwidth">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr v-for="item in cart.items" v-bind:key="item.product.id">
<td>{{ item.product.name }}</td>
<td>{{ item.product.price }}</td>
<td>{{ item.quantity }}</td>
<td>?{{ getItemTotal(item).toFixed(2) }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>{{ cartTotalLength }}</td>
<td>?{{ cartTotalPrice.toFixed(2) }}</td>
</tr>
</tfoot>
</table>
</div>
<div class="column is-12 box">
<h2 class="subtitle">Shipping Details</h2>
<p class="has-text-grey mb-4">* All fields required</p>
<div class="columns is-multiline">
<div class="column is-6">
<div class="field">
<label>First Name*</label>
<div class="control">
<input type="text" class="input" v-model="first_name">
</div>
</div>
<div class="field">
<label>Last Name*</label>
<div class="control">
<input type="text" class="input" v-model="last_name">
</div>
</div>
<div class="field">
<label>E-mail*</label>
<div class="control">
<input type="email" class="input" v-model="email">
</div>
</div>
<div class="field">
<label>Phone*</label>
<div class="control">
<input type="text" class="input" v-model="phone">
</div>
</div>
</div>
<div class="column is-6">
<div class="field">
<label>Address*</label>
<div class="control">
<input type="text" class="input" v-model="address">
</div>
</div>
<div class="field">
<label>Zipcode*</label>
<div class="control">
<input type="text" class="input" v-model="zipcode">
</div>
</div>
<div class="field">
<label>Place*</label>
<div class="control">
<input type="email" class="input" v-model="place">
</div>
</div>
</div>
</div>
<div class="notification is-danger mt-4" v-if="errors.length">
<p v-for="error in errors" v-bind:key="error">{{ error }}</p>
</div>
<hr>
<div id="card-element" class="mb-5"></div>
<template v-if="cartTotalLength">
<hr>
<button class="button is-dark" @click="submitForm">Pay with Stripe</button>
</template>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "Checkout",
data() {
return {
cart: {
items: []
},
stripe: {},
card: {},
first_name: '',
last_name: '',
email: '',
phone: '',
address: '',
zipcode: '',
place: '',
errors: []
}
},
mounted() {
document.title = ' The "GO BUY IT" page | Bjackets '
this.cart = this.$store.state.cart
if (this.cartTotalLength > 0) {
this.stripe = Stripe('pk_test_51L3bhzFMIo7cZ677WbW384hMgVFcLs9E0x4sLocwajtGbnZIlplXoWSlSKr1IM89tWOCFYIBOWPpcF8OzBWGCnZR00MN1fPAGW')
const elements = this.stripe.elements();
this.card = elements.create('card', { hidePostalCode: true })
this.card.mount('#card-element')
}
},
methods: {
getItemTotal(item) {
return item.quantity * item.product.price
},
submitForm() {
this.errors = []
if (this.first_name === '') {
this.errors.push('The First Name feild is empty. Please fill-out the space with your first name. For example, "Gaylord"')
}
if (this.last_name === '') {
this.errors.push('The Last Name feild is empty. Please fill-out the space with your last name. For example, "Gaylord"')
}
if (this.email === '') {
this.errors.push('The email feild is missing. Please fill-out the space with your email. For example, "[email protected]"')
}
if (this.phone === '') {
this.errors.push('The phone feild is missing. Please fill-out the space with your contact number. For example, "123-456-7890"')
}
if (this.address === '') {
this.errors.push('The address feild is missing. Please fill-out the space with your address. In other words, tell me where you live.')
}
if (this.zipcode === '') {
this.errors.push('The zipcode feild is missing.')
}
if (this.place === '') {
this.errors.push('Are you located in Lozun, Visayas, Mindanao?')
}
if (!this.errors.length) {
this.$store.commit('setIsLoading', true)
this.stripe.createToken(this.card).then(result => {
if (result.error) {
this.$store.commit('setIsLoading', false)
this.errors.push('Something went wrong with Stripe. Please try again')
console.log(result.error.message)
} else {
this.stripeTokenHandler(result.token)
}
})
}
},
async stripeTokenHandler(token) {
const items = []
for (let i = 0; i < this.cart.items.length; i ) {
const item = this.cart.items[i]
const obj = {
product: item.product.id,
quantity: item.quantity,
price: item.product.price * item.quantity
}
items.push(obj)
}
const data = {
'first_name': this.first_name,
'last_name': this.last_name,
'email': this.email,
'address': this.address,
'zipcode': this.zipcode,
'place': this.place,
'phone': this.phone,
'items': items,
'stripe_token': token.id
}
await axios
.post('/api/v1/checkout/', data)
.then(response => {
this.$store.commit('clearCart')
this.$router.push('/cart/success')
})
.catch(error => {
this.errors.push('Something went wrong. Please try again')
console.log(error)
})
this.$store.commit('setIsLoading', false)
}
},
computed: {
cartTotalPrice() {
return this.cart.items.reduce((acc, curVal) => {
return acc = curVal.product.price * curVal.quantity
}, 0)
},
cartTotalLength() {
return this.cart.items.reduce((acc, curVal) => {
return acc = curVal.quantity
}, 0)
},
}
}
</script>
這是將訂單從客戶端連接到服務器的 mani 模塊（views.py），
import stripe
from django.conf import settings
from django.contrib.auth.models import User
from django.http import Http404
from django.shortcuts import render
from rest_framework import status, authentication, permissions
from rest_framework.decorators import api_view, authentication_classes, permission_classes
from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Order, OrderItem
from .serializers import OrderSerializer
@api_view(['POST'])
@authentication_classes([authentication.TokenAuthentication])
@permission_classes([permissions.IsAuthenticated])
def checkout(request):
serializer = OrderSerializer(data=request.POST)
if serializer.is_valid():
stripe.api_key = settings.STRIPE_SECRET_KEY
paid_amount = sum(item.get('quantity') * item.get('product').price for item in serializer.validated_data['items'])
try:
charge = stripe.Charge.create(
amount=int(paid_amount * 100),
currency='USD',
description='Charge from Bjackets',
source=serializer.validated_data['stripe_token']
)
serializer.save(user=request.user, paid_amount=paid_amount)
return Response(serializer.data, status=status.HTTP_201_CREATED)
except Exception:
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
uj5u.com熱心網友回復：
我認為您將 API 權限設定為IsAuthenticated，但您沒有在前端設定身份驗證標頭。
請添加身份驗證標頭或在 api 視圖中設定permission_classes為。[permissions.AllowAny]
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481881.html