Javascript ReactJS中的PayFast支付集成

我正在尝试将PayFast支付整合到ReactJS中

根据PayFast，当表单作为POST请求提交时，用户将被引导到PayFast支付页面

我如何知道付款何时完成或从notify_url取消

---

PayFast仅显示PHP示例。我也可以通过NodeJS处理这个问题吗？

我在ReactJS中成功地实现了它，希望它能帮助您。 我在前线所做的是把所需的信息做成一个对象

const params = new URLSearchParams({
  merchant_id: "....",
  merchant_key: "....",
  return_url: "https://yourApplication/paymentscreen",
  cancel_url: "https://yourApplication/paymentscreen",
  notify_url: "https://yourApplication/paymentscreen",
  name_first: name,
  email_address: email,
  m_payment_id: unique_id_for_user,
  amount: amount,
  item_name: payment_name,
  item_description: description_if_any,
  custom_int1: custome_integer_value_if_any,
  custom_str1: custome_string_value_if_any,
  custom_str2: custome_string_value_if_any,
  passphrase: passphrase_set_in_payfast_account.
});

// Create an MD5 signature of it.
const MD5Signature = md5(params.toString())

现在我所做的是在点击付款按钮时提交一个隐藏的表单。 确保序列在这里很重要，他们确实提到了关于字段序列的任何信息。我也面临许多问题，但后来经过太多的调试，我得到了正确的序列

<form action="https://www.payfast.co.za/eng/process" method="POST">
          <input type="hidden" name="merchant_id" value="...." />
          <input type="hidden" name="merchant_key" value="....." />
          <input type="hidden" name="return_url" value="https://yourApplication/paymentscreen" />
          <input type="hidden" name="cancel_url" value="https://yourApplication/paymentscreen" />
          <input type="hidden" name="notify_url" value="https://yourApplication/paymentscreen" />
          <input type="hidden" name="name_first" value={name} />
          <input type="hidden" name="email_address" value={email} />
          <input type="hidden" name="m_payment_id" value={unique_id_for_user} />
          <input type="hidden" name="amount" value={amount} />
          <input type="hidden" name="item_name" value={payment_name} />
          <input type="hidden" name="item_description" value={description_if_any} />
          <input type="hidden" name="custom_int1" value={custome_integer_value_if_any} />
          <input type="hidden" name="custom_str1" value={custome_string_value_if_any} />
          <input type="hidden" name="custom_str2" value={custome_string_value_if_any} />
          <input type="hidden" name="passphrase" value="passphrase" />
          <input type="hidden" name="signature" value={MD5Signature} />
          <div className="row" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
            <div className="col-lg-6">
              <img alt="payfast" src="../public/upload/payfastpaynow.png" vspace="3" width="100%" height="100%" />
            </div>
            <div className="col-lg-6">
                <input style={{marginRight: 20, float: 'right'}} name="disable" type="submit" disabled={isEnablePayment} width="100%" height="100%" alt="Submit" align="bottom" value="Purchase" />
            </div>
          </div>
        </form>

---

我在ReactJS中成功实现了它，希望它能帮助您。 我在前线所做的是把所需的信息做成一个对象

const params = new URLSearchParams({
  merchant_id: "....",
  merchant_key: "....",
  return_url: "https://yourApplication/paymentscreen",
  cancel_url: "https://yourApplication/paymentscreen",
  notify_url: "https://yourApplication/paymentscreen",
  name_first: name,
  email_address: email,
  m_payment_id: unique_id_for_user,
  amount: amount,
  item_name: payment_name,
  item_description: description_if_any,
  custom_int1: custome_integer_value_if_any,
  custom_str1: custome_string_value_if_any,
  custom_str2: custome_string_value_if_any,
  passphrase: passphrase_set_in_payfast_account.
});

// Create an MD5 signature of it.
const MD5Signature = md5(params.toString())

现在我所做的是在点击付款按钮时提交一个隐藏的表单。 确保序列在这里很重要，他们确实提到了关于字段序列的任何信息。我也面临许多问题，但后来经过太多的调试，我得到了正确的序列

<form action="https://www.payfast.co.za/eng/process" method="POST">
          <input type="hidden" name="merchant_id" value="...." />
          <input type="hidden" name="merchant_key" value="....." />
          <input type="hidden" name="return_url" value="https://yourApplication/paymentscreen" />
          <input type="hidden" name="cancel_url" value="https://yourApplication/paymentscreen" />
          <input type="hidden" name="notify_url" value="https://yourApplication/paymentscreen" />
          <input type="hidden" name="name_first" value={name} />
          <input type="hidden" name="email_address" value={email} />
          <input type="hidden" name="m_payment_id" value={unique_id_for_user} />
          <input type="hidden" name="amount" value={amount} />
          <input type="hidden" name="item_name" value={payment_name} />
          <input type="hidden" name="item_description" value={description_if_any} />
          <input type="hidden" name="custom_int1" value={custome_integer_value_if_any} />
          <input type="hidden" name="custom_str1" value={custome_string_value_if_any} />
          <input type="hidden" name="custom_str2" value={custome_string_value_if_any} />
          <input type="hidden" name="passphrase" value="passphrase" />
          <input type="hidden" name="signature" value={MD5Signature} />
          <div className="row" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
            <div className="col-lg-6">
              <img alt="payfast" src="../public/upload/payfastpaynow.png" vspace="3" width="100%" height="100%" />
            </div>
            <div className="col-lg-6">
                <input style={{marginRight: 20, float: 'right'}} name="disable" type="submit" disabled={isEnablePayment} width="100%" height="100%" alt="Submit" align="bottom" value="Purchase" />
            </div>
          </div>
        </form>

PayFast将在支付完成后将用户重定向回您的返回url之前，向您的通知url发回帖子。如果取消付款，用户将返回到您的取消url。需要注意的是，任何付款数据都不会过帐到return\u url或cancel\u url。谢谢你@Daniel_ZA。取消订阅怎么样？您有哪些参考资料可以帮助取消订阅。我联系了支持团队，他们告诉我payfast目前不支持JavaScript，但我并没有成功完成添加hic并使用JavaScript获取订阅，现在正在取消订阅。他们所说的“不支持JavaScript”的意思是，由于CORS，您无法使用JS直接发布到API端点（这与用于创建订阅的端点不同）。您需要从服务器端脚本（PHP、node等）执行任何后续API调用（更新、收费、暂停、取消）订阅创建完成后。@Daniel_ZA Thanx经过更多的尝试后，我完成了任务。谢谢。@jatin.7744您是如何实现它的。我也在使用vuejs和laravel开发payfast，但我无法做到这一点。请您分享演示代码或任何工作示例。ThanksPayFast将在付款完成后，用户将被重定向回您的返回url。如果取消付款，用户将返回到您的取消url。需要注意的是，没有任何付款数据会发布到返回url或取消url。谢谢@Daniel_ZA。关于取消订阅，您有帮助取消订阅的参考资料吗订阅。我联系了支持团队，他们告诉我payfast目前不支持JavaScript，但我并没有成功完成添加hic并使用JavaScript获取订阅，现在正在取消订阅。他们所说的“不支持JavaScript”是什么意思由于CORS，您无法使用JS直接发布到API端点（这与用于创建订阅的端点不同）。您需要从服务器端脚本（PHP、节点等）执行任何后续API调用（更新、收费、暂停、取消）订阅创建完成后。@Daniel_ZA Thanx经过更多的尝试后，我完成了任务。谢谢。@jatin.7744您是如何实现它的。我也在与vuejs和laravel一起开发payfast，但我无法做到这一点。您能分享演示代码或任何工作示例吗？谢谢