Integrating MonCash in a React Native app without exposing my secret

Question

I'm building a React Native (Expo) app. The MonCash examples all run on a server. Can I call the API directly from the app, and how do I bring the user back into the app after paying?

Accepted Answer

**Don't call MonCash from the app.** Anything in an app bundle can be extracted: APK and IPA files are easy to unpack, so your `client_secret` would leak. The app talks to **your backend**, and the backend talks to MonCash.

~~~
App ──► POST /api/payments (your backend) ──► MonCash CreatePayment
App ◄── { redirectUrl }
App opens redirectUrl in an in-app browser
MonCash ──► your return URL (backend) ──► verifies ──► redirects to myapp://payment-result?order=…
~~~

~~~tsx
import * as WebBrowser from "expo-web-browser";

async function pay(orderId: string) {
  const { redirectUrl } = await api.post("/payments", { orderId }); // backend creates the MonCash payment
  const result = await WebBrowser.openAuthSessionAsync(redirectUrl, "myapp://payment-result");
  // The browser session closes when your return page redirects to myapp://…
  // Then re-check with your backend. Never trust the redirect alone.
  const status = await api.get("/orders/" + orderId + "/status");
  showResult(status);
}
~~~

On the backend return route, after verifying the payment with `RetrieveTransactionPayment`, redirect to your app's **deep link** (`myapp://payment-result?order=…`).

`openAuthSessionAsync` (an auth session) works better than a plain WebView here. It returns control to the app automatically, and users can see they're really on the MonCash domain.

1 réponse