Безопасная оплата с PayPal

Question

Я пытаюсь реализовать безопасный способ оплаты с помощью реагировать-paypal-express-checkout ... но я увидел, что пользователь может легко изменить сумму с помощью инструментов 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);

Answer 1

Никогда не доверяйте значениям, поступающим со стороны клиента.Вы должны полностью проверить сумму на стороне сервера.

Как сказал @jorbuedo, вы можете создать интеграцию с сервером , чтобы значения никогда не отображались на стороне клиента.Отправьте идентификатор сеанса или номер заказа или что-то на ваш сервер, получите заказ из вашей БД и выполните перенаправление в PayPal для обработки транзакции на стороне сервера.

В качестве альтернативы, вы можете сохранить вещи на стороне клиентау вас есть, но затем подтвердите транзакцию после ее завершения.Для этого вы можете использовать Мгновенные платежные уведомления или более новые Webhooks .

Вы можете передать переменную custom в свойство paymentOptions <PaypalExpressButton ...>, а затем используйте это значение для проверки правильности суммы, выплаченной в IPN.

Например:

<PaypalExpressButton
  client={client}
  currency="USD"
  total={this.state.amount}
  paymentOptions={{
    custom: this.props.sessionId
  }}
/>

Затем, как часть IPN, вы можете извлечь идентификатор сеанса изDB, проверьте, что ожидаемая сумма платежа (которую вам нужно будет сохранить или рассчитать на основе предметов / цен, сохраненных по идентификатору сеанса) совпадает с суммой платежа, которую Paypal предоставляет (mc_gross дляпример).Полный список переменных, которые вы получаете в рамках IPN, доступен здесь .

Плата за использование IPN не взимается.Если вы не хотите создавать этот поток, вам придется вручную проверять каждый сделанный заказ, чтобы убедиться, что сумма верна.Если вы используете что-то маленькое, это может быть приемлемым компромиссом.

Редактировать: Не просто отправьте ожидаемую сумму в качестве пользовательской переменной, а сравните ее со значением mc_gross, так как это также можетизменить с помощью F12 или расширение браузера .Значение должно быть непрозрачным, чтобы вы могли перевести серверную часть во что-то значимое.

Answer 2

@ jorbuedo и @Dave Salomon дают отличные ответы о безопасности, и вы должны принять их к сведению.

Однако, если вы действительно не хотите, чтобы пользователь изменил состояние вашего компонента и реквизиты, вы можетеотключить React Devtools с этим хаком.

if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.emit = function() {};
}

По сути, он высмеивает некоторые методы react-devtools, и Devtool все равно не может найти ваше дерево компонентов.

Этот ответ предназначен только для того, чтобы пользователь не мог редактировать ваши компоненты.Это не лучшее решение для безопасности)

Answer 3

Paypal допускает оба типа использования, с клиента и с сервера.Я думаю, что для клиента возможно изменить запрос на их конце, чтобы заплатить меньше.Но, в конце концов, чем бы вы ни занимались, вы получите заказ и оплату.Просто проверьте, если платеж отличается от того, который должен быть, и не выполняйте заказ, сделайте возврат.

Если вы хотите сэкономить, тогда используйте серверную опцию , которая делаетплатеж через ваш сервер.

В любом случае, как и при любом другом способе оплаты, я бы порекомендовал вам потратить время на его реализацию самостоятельно, следуя великолепному и хорошо документированному API, предоставленному Paypal.У них много примеров и вариантов использования, с кодом для браузера и сервера.