I am facing an issue while trying to process a payment using Stripe. Every time I click onPurchase, I receive an error message saying "no token provided". Can anyone assist me with this?
Below is my Vue template where I call the function:
<span class="a-button-inner">
<span @click="onPurchase" class="a-button-text">Purchase</span>
</span>
This is the script tag in which I send the token to Stripe for payment processing:
<script>
import { mapGetters } from "vuex";
import axios from "axios";
export default {
data() {
return {
error: "",
stripe: null,
card: null
};
},
computed: {
...mapGetters([
"getCart",
"getCartTotalPriceWithShipping",
"getEstimatedDelivery"
])
},
mounted() {
this.stripe = window.Stripe(
"pk_test_51KGqWkHCcyZvTrDrTmAbtZkngRWbP0FCvV3bgZnz8GXuleqD1fo1lRa5seDD3qKsk0irYLumaH3SeI5cILED3pwq00NR023dNZ"
);
let elements = this.stripe.elements();
this.card = elements.create("card");
this.card.mount(this.$refs.card);
},
methods: {
async onPurchase() {
// This creates a token to send to Stripe
let token = await this.stripe.createToken(this.card);
return axios("http://localhost:5000/api/payment", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
token: token,
totalPrice: this.getCartTotalPriceWithShipping,
cart: this.getCart,
estimatedDelivery: this.getEstimatedDelivery
})
})
.then(data => {
console.log(data);
})
.then(res => {
console.log(res);
});
},
formatPrice(value) {
let val = (value / 1).toFixed(2).replace(".", ",");
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
};
</script>
The following error message appears in my console:
{
"success": false,
"message": "No token Provided"
}
In my backend code, I handle sending the payment to Stripe:
const router = require("express").Router();
const moment = require("moment");
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const verifyToken = require("../middelwares/verify-token");
const Order = require("../models/order");
const SHIPMENT = {
normal: {
price: 13.98,
days: 7
},
fast: {
price: 49.98,
days: 3
}
};
function shipmentPrice(shipmentOption) {
let estimated = moment()
.add(shipmentOption.days, "d")
.format("dddd MMMM Do");
return { estimated, price: shipmentOption.price };
}
router.post("/shipment", (req, res) => {
let shipment;
if (req.body.shipment === "normal") {
shipment = shipmentPrice(SHIPMENT.normal);
} else {
shipment = shipmentPrice(SHIPMENT.fast);
}
res.json({ success: true, shipment: shipment });
});
router.post("/payment", verifyToken, (req, res) => {
let totalPrice = Math.round(req.body.totalPrice * 100);
stripe.customers
.create({
email: req.decoded.email
})
.then(customer => {
return stripe.customers.createSource(customer.id, {
source: "tok_visa"
});
})
.then(source => {
return stripe.charges.create({
amount: totalPrice,
currency: "usd",
customer: source.customer
});
})
.then(async charge => {
let order = new Order();
let cart = req.body.cart;
cart.map(product => {
order.products.push({
productID: product._id,
quantity: parseInt(product.quantity),
price: product.price
});
});
order.owner = req.decoded._id;
order.estimatedDelivery = req.body.estimatedDelivery;
await order.save();
res.json({
success: true,
message: "Successfully made a payment"
});
})
.catch(err => {
res.status(500).json({
success: false,
message: err.message
});
});
});
module.exports = router;