Безопасная оплата через PayPal
Я пытаюсь реализовать безопасный способ оплаты с помощью реакция-PayPal-экспресс-касса ... но я видел, что пользователь может легко изменить сумму с помощью инструментов chrome dev ... не следует ли мне делать запрос API к PayPal с моего сервера и проверять сумму с моей БД? Я не видел возможности сделать это с помощью PayPal ...
вот мой код:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import 'react-credit-cards/es/styles-compiled.css'
import './checkout.css';
import PaypalExpressBtn from 'react-paypal-express-checkout';
class CheckOut extends Component {
constructor(props) {
super(props);
this.state = {
amount: 40
}
}
render() {
const client = {
sandbox: 'XXXX',
production: 'Your-Production-Client-ID',
}
return (
<PaypalExpressBtn client = {client} currency = {'USD'} total = {this.state.amount} />
);
}
}
export default connect(CheckOut);
Ответы 3
Paypal допускает оба типа использования, как с клиента, так и с сервера. Я предполагаю, что клиент может изменить запрос на своей стороне, чтобы платить меньше. Но, в конце концов, чем бы вы ни занимались, вы получите заказ и оплату. Просто проверьте, не отличается ли оплата от положенной и не выполняйте заказ, сделайте возврат.
Если вы хотите избавиться от проблем, используйте вариант сервера, который производит оплату через ваш сервер.
В любом случае, как и в случае с любым другим способом оплаты, я бы рекомендовал вам найти время, чтобы реализовать его самостоятельно, следуя отличному и хорошо документированному API, предоставляемому Paypal. У них есть много примеров и вариантов использования с кодом для браузера и сервера.
Я не вижу ничего хорошего в документации.
Никогда не доверяйте ценностям, исходящим от клиента. Вы должны обязательно проверить сумму на стороне сервера.
Как сказал @jorbuedo, вы можете создать интеграция с сервером, чтобы значения никогда не отображались на стороне клиента. Отправьте идентификатор сеанса или номер заказа или что-то еще на свой сервер, получите заказ из своей базы данных и выполните перенаправление в PayPal для обработки транзакции на стороне сервера.
В качестве альтернативы вы можете сохранить данные на стороне клиента, которые у вас есть, но затем подтвердить транзакцию после ее завершения. Для этого вы можете использовать Мгновенные уведомления об оплате или более новый Вебхуки.
Вы можете передать переменную custom в свойство paymentOptions<PaypalExpressButton ...>, а затем использовать это значение для проверки правильности уплаты суммы в IPN.
Например:
<PaypalExpressButton
client = {client}
currency = "USD"
total = {this.state.amount}
paymentOptions = {{
custom: this.props.sessionId
}}
/>
Затем, как часть IPN, вы можете извлечь идентификатор сеанса из БД, проверить сумму платежа ожидал (которую вам нужно сохранить или рассчитать на основе товаров / цен, сохраненных для идентификатора сеанса), такая же, как и для сумма платежа, предоставляемая Paypal (например, mc_gross). Полный список переменных, которые вы получаете как часть IPN, доступен здесь.
Плата за использование IPN не взимается. Если вы не хотите создавать этот поток, вам придется вручную проверять каждый сделанный заказ, чтобы убедиться, что сумма верна. Если у вас что-то маленькое, это может быть приемлемым компромиссом.
Обновлено: не просто отправляйте ожидаемую сумму в качестве пользовательской переменной и сравнивайте ее со значением mc_gross, так как это также можно изменить с помощью F12 или расширение браузера. Значение должно быть чем-то непрозрачным, чтобы вы могли преобразовать серверную часть во что-то значимое.
@jorbuedo и @Dave Salomon дают отличные ответы о безопасности, и вы должны принять их во внимание.
Однако, если вы действительно не хотите, чтобы пользователь изменял состояние вашего компонента и свойства, вы можете отключить React Devtools с помощью этого хака.
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.emit = function() {};
}
По сути, он издевается над некоторыми методами react-devtools, а Devtool все равно не может найти ваше дерево компонентов.
Этот ответ предназначен только для запрета пользователю редактировать ваши компоненты. Это не лучшее решение для безопасности)
помогли ли вам какие-либо ответы решить возникшую у вас проблему? Если да, не забудьте отметить ответ как принятый, который больше всего помог в решении проблемы.