Integrating MonCash in a React Native app without exposing my secret

poze 2 months ago215 gadeen

6

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?

Anviwònman:React Native 0.76Expo

Dyagnostik IA

Se IA ki fè l. Se pa yon repons — kominote a anba a konfime oswa korije l. Toujou verifye anvan ou fye l.

1 Repons

6
✓
✓ Repons yo aksepte

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=…
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.

Konekte pou di lòt moun si li te mache.

answered 2 months ago

Sign in and verify your email to post an answer.