无现金与反应原生集成

Question

我正在使用 React Native、Expo 和 Supabase 开发一个应用程序。对于付款，我正在与 Cashfree 集成。

付款流程如下：

1. 设置付款回调

  useEffect(() => {
    const onVerify = (orderId: string) => {
      console.log("Payment verified:", orderId);
      // Handle successful payment
    };

    const onError = (error: any, orderId: string) => {
      console.error("Payment failed:", error, orderId);
      // Handle payment error
    };

    CFPaymentGatewayService.setCallback({
      onVerify,
      onError,
    });

    return () => {
      CFPaymentGatewayService.removeCallback();
    };
  }, []);

2. 创建订单 - 我调用 Supabase 边缘函数来创建 Cashfree 订单，如下所示。

客户

const { data, error } = await supabase.functions.invoke('create-payment', {
      body: {
        order_id: customerDetails.order_id,
        amount,
        details: customerDetails.details
      }
    })

supabase边缘函数

    const orderRequest = {
      order_id: order_id,
      order_currency: "INR",
      order_amount: amount.toString(),
      customer_details: details,
      order_meta: {
        return_url: CASHFREE_WEBHOOK_URL
      }
    }

    console.log('Calling Cashfree API with payload:', orderRequest);

    const response = await fetch(`${CASHFREE_API_URL}`, {
      method: 'POST',
      headers: {
        'x-client-id': CASHFREE_APP_ID,
        'x-client-secret': CASHFREE_SECRET_KEY,
        'x-api-version': '2023-08-01',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(orderRequest)
    })

3. 成功接收 payment_session_id 和 order_id - 收到这些后，我创建一个会话，然后执行 doPayment

    const dropPayment = new CFDropCheckoutPayment(
      session,
      paymentModes,
      theme
    )

    return CFPaymentGatewayService.doPayment(dropPayment)

当 doPayment 被调用时，Cashfree 的 Checkout 页面被加载。

目前我正在模拟器上进行测试，但是看了官方文档还是有些不明白。我有几个问题：

1. 在官方文档和通过Google搜索，我发现使用Card进行测试时，使用的是卡号“4111 1111 1111 1111”。但是，我收到以下错误。即使在谷歌上搜索后，我也不知道这意味着什么。

2. 在边缘函数中创建订单时，我在正文中添加了 return_url (webhook)。此 URL 是另一个 Supabase 边缘函数，旨在处理订单后处理。然而，这个边缘函数没有被调用。

3. 当我在Cashfree网站上查看Checkout预览时，有选择UPI应用程序的按钮，但在模拟器上，我只能使用UPI ID输入进行测试。这是因为它是模拟器吗？

4. 官方文档包含以下信息。 对于问题2，在webhook中处理这个是否正确？或者，不是在创建订单时调用 webhook（边缘函数）作为 return_url，而是应该在 onVerify 回调中调用它？

Once the payment is completed, you need to confirm whether the payment was successful by checking the order status. After payment user will be redirected back to your component

如果您能分享任何见解或指导，无论多小，我将不胜感激。预先感谢您！

Answer 1

对于第三点，您可以使用下面的 Cashfree 示例 UPI 应用程序链接

https://github.com/cashfree/nextgen-android/blob/master/assets/SampleTestUPISimulator.apk

如有其他疑问，请在discord频道上联系我们

https://discord.com/invite/ed9VWDnrh7