时间戳

首页 > 解决方案 > 在 Nextjs 中集成 Cashfree 支付网关

php - 在 Nextjs 中集成 Cashfree 支付网关

问题描述

我们正在使用 Cashfree 支付网关，并希望将其集成到我们使用 nextjs 开发的前端中。根据 cashfree 提供的文档（大部分文档与使用 PHP 的 Web 集成相关），我们需要一个带有 POST 请求的表单，该表单在同一窗口上重定向到支付网关

<form id="redirectForm" method="post" action="https://test.cashfree.com/billpay/checkout/post/submit">
    <input type="hidden" name="appId" value="<YOUR_APPID_HERE>"/>
    <input type="hidden" name="orderId" value="order00001"/>
    <input type="hidden" name="orderAmount" value="100"/>
    <input type="hidden" name="orderCurrency" value="INR"/>
    <input type="hidden" name="orderNote" value="test"/>
    <input type="hidden" name="customerName" value="John Doe"/>
    <input type="hidden" name="customerEmail" value="Johndoe@test.com"/>
    <input type="hidden" name="customerPhone" value="9999999999"/>
    <input type="hidden" name="returnUrl" value="<RETURN_URL>"/>
    <input type="hidden" name="notifyUrl" value="<NOTIFY_URL>"/>
    <input type="hidden" name="signature" value="<GENERATED_SIGNATURE>"/>
    <input type="hidden" name="paymentSplits" value="<payment_split_value>"/>
  </form>

在我们的代码中，我们尝试使用 Fetch 发出相同的请求

export const rtiPayment =(details)=>{
    var postData = [];
    for (var property in details) {
    var encodedKey = encodeURIComponent(property);
    var encodedValue = encodeURIComponent(details[property]);
    postData.push(encodedKey + "=" + encodedValue);
}
    return fetch("https://test.cashfree.com/billpay/checkout/post/submit",{
        mode: 'no-cors',
        method: 'POST',
        headers: {
            'cache-control' : 'no-cache',
            "Content-Type": "application/x-www-form-urlencoded",
          },
          
        body: postData,
        json: true
    })
    .then((response) => {
        if (response.redirected) {
            window.location.href = response.url;
        }
      console.log(response)  
      return response
    })
    .catch((err) => {
      console.log(err)
    })
}

但我们得到以下回应。

PaymentRti.js:42 Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}

有人可以建议我们是否正确提出请求。如果没有，你能建议正确的方法。

标签： phpreactjsnext.jspayment-gateway

解决方案

推荐阅读