Reputation: 983
I am doing an Udemy course on Full Stack React(React, Redux, MongoDB, Node) by Stephen Grider. I have run into a problem while adding Stripe checkout for payment processing.
THE PROBLEM: After I click on the "Add Credits" button, the credit card form shows up. I enter the details and submit the details. Stripe sends me a token and I send that token to 'api/stripe' route, where I finalise the charge, add 5 credits to the user model and return that updated user document to the frontend. However, I am not able to get the user back. There is an error that says: Error: As per Indian regulations, export transactions require a customer name and address. I have attached a picture of the complete error message.
How can I fix the error? Note that I am using react-stripe-checkout package at the frontend and the stripe package at the backend and Redux Toolkit for state management. All the necessary code samples are as below.
Payments.js
import React from "react";
import StripeCheckout from "react-stripe-checkout";
import { Button } from "react-bootstrap";
import { handleToken } from "./tokenSlice";
import { useDispatch } from "react-redux";
const Payments = () => {
const dispatch = useDispatch();
return (
<StripeCheckout
name="Emaily"
description="$5 for 5 email credits"
amount={500}
token={(token) => dispatch(handleToken(token))}
stripeKey={process.env.REACT_APP_STRIPE_KEY}
>
<Button variant="outline-warning">Add Credits</Button>
</StripeCheckout>
);
};
export default Payments;
billingRoutes.js
const express = require("express");
const keys = require("../config/keys");
const stripe = require("stripe")(keys.stripeSecretKey);
const router = express.Router();
router.post("/", async (req, res) => {
const charge = await stripe.charges.create({
amount: 500,
currency: "usd",
description: "$5 for 5 credits",
source: req.body.id,
});
req.user.credits += 5;
const user = await req.user.save();
res.send(user);
});
module.exports = router;
tokenSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
const initialState = {
status: "idle",
};
export const handleToken = createAsyncThunk(
"token/handleToken",
async (token) => {
const { data } = await axios.post("/api/stripe", token);
return data;
}
);
const tokenSlice = createSlice({
name: "token",
initialState,
reducers: {},
extraReducers: {
[handleToken.pending]: (state, action) => {
state.status = "loading";
},
[handleToken.fulfilled]: (state, action) => {
state.status = "succeeded";
state.userInfo = action.payload;
},
},
});
export default tokenSlice.reducer;
Upvotes: 1
Views: 5144
Reputation: 11
Solution Found: Using Indian Test Card
I realized that there was no issue with the code provided in the question. The main problem was with the card used for testing purposes.
For testing purposes in INR, it's recommended to use the following Indian Test Visa Card:
Indian Test Visa Card: 4000 0035 6000 0008
I had similar problem and am using django. USE credit card number=4000 0035 6000 0008. (DO NOT USE credit card number= 4242 4242 4242 4242).
Upvotes: 1
Reputation: 11
Change currency to inr.
non-inr transaction should be in usd(Dollars) and inr transaction should be in inr(Indian Rupees).
Upvotes: 1
Reputation: 286
You are not passing all the required information to Stripe. Currently your charges object passed to Stripe includes amount, currency and description, but you also need to provide customer`s name and billing address as per Stripe requirements for India export charges, details here:
Upvotes: 0