#javascript #reactjs #stripe-payments
#javascript #reactjs #stripe-платежи
Вопрос:
Я впервые использую stripe в своем проекте react.
Я настроил платеж с помощью тестовых ключей api. Я использую Javascript и React уже несколько лет, но у меня мало знаний о node.js / экспресс. Поэтому я использовал boiler plate из sandbox для серверной части, которую вы можете увидеть ниже;
const cors = require("cors");
const express = require("express");
const stripe = require("stripe")("MY TEST KEY HAS BEEN INSERTED HERE");
const uuid = require("uuid/v4");
const app = express();
app.use(express.json());
app.use(cors());
app.get("/", (req, res) => {
res.send("Add your Stripe Secret Key to the .require('stripe') statement!");
});
app.post("/checkout", async (req, res) => {
console.log("Request:", req.body);
let error;
let status;
try {
const { product, token } = req.body;
const customer = await stripe.customers.create({
email: token.email,
source: token.id
});
const idempotency_key = uuid();
const charge = await stripe.charges.create(
{
amount: 8.00,
currency: "gbp",
customer: customer.id,
receipt_email: token.email,
description: `Purchased the ${product.name}`,
name: token.card.name,
},
{
idempotency_key
}
);
console.log("Charge:", { charge });
status = "success";
} catch (error) {
console.error("Error:", error);
status = "failure";
}
res.json({ error, status });
});
app.listen(8080);
И вот функция в react js, которая обрабатывает даже после того, как пользователь ввел номер карты и т.д.
async function handleToken(token){
let whichClass = {
name: "Bodytone",
price: 8.00
}
const response = await axios.post("https://s9mh5.sse.codesandbox.io/checkout", {token, whichClass});
const { status } = response.data;
if (status === "success") {
alert("Successful payment");
} else {
alert("failed payment");
}
}
Я обнаружил, что когда я нажимаю, чтобы отправить платеж после ввода данных, я вижу зеленую галочку, чтобы предположить, что все прошло гладко. Но на панели инструментов stripe для этой учетной записи ничего не отображается в результате тестового платежа.
В консоли я вижу два разных сообщения об ошибках, которые подробно описаны ниже:
StripeCheckout.open: либо ‘token’, либо ‘source’ является обязательным параметром, но ни один из них не был найден. Вы можете узнать о доступных параметрах конфигурации в документации по оформлению заказа: https://stripe.com/docs/checkout 0.chunk.js:108728:20
А также…..
**Uncaught TypeError: this.fn is not a function
trigger https://checkout.stripe.com/checkout.js:3
bind https://checkout.stripe.com/checkout.js:3
onToken https://checkout.stripe.com/checkout.js:3
closed https://checkout.stripe.com/checkout.js:3
bind https://checkout.stripe.com/checkout.js:3
processMessage https://checkout.stripe.com/checkout.js:2
bind https://checkout.stripe.com/checkout.js:2
message https://checkout.stripe.com/checkout.js:2
RPC https://checkout.stripe.com/checkout.js:2
checkout.js:3:24013**
Кто-нибудь может обнаружить ошибку / ошибку?
Мы очень ценим вашу помощь и отзывы!!
Ответ №1:
Вам следует рассмотреть возможность использования новой проверки, а не устаревшей, которую вы используете сейчас, или, возможно, элементов для создания собственной формы, для которой вы могли бы использовать https://github.com/stripe/react-stripe-js .
Тем не менее, вы не предоставили достаточно клиентского кода для диагностики проблемы.
Комментарии:
1. Привет @floatingLomas, спасибо за отзывы и предложения! Я обязательно рассмотрю эту рекомендацию.