API Reference

Install

npm install drexpay-react-native react-native-webview
# or
yarn add drexpay-react-native react-native-webview

# iOS — run pod install after
cd ios && pod install

1 — Create the payment link on your server

Your API key lives only here, never in the app bundle.

// pages/api/create-payment.ts  (your Next.js / Express backend)
// NEVER put your Drexpay API key in the mobile app

export async function POST(req) {
  const { amount, email } = await req.json();

  const res = await fetch("https://drexpay.tech/api/payment-links", {
    method: "POST",
    headers: {
      "Authorization": "Bearer " + process.env.DREXPAY_SECRET_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email,
      amount,                              // whole number, e.g. 25000 for ₦25,000
      redirectTo: "https://yourapp.com/payment-done",
    }),
  });

  const { id, url, reference } = await res.json();
  return Response.json({ url, reference });
}

2 — Open the checkout in your app

import { useState } from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";
import { DrexpayCheckout } from "drexpay-react-native";

export function OrderScreen() {
  const [checkoutUrl, setCheckoutUrl] = useState<string | null>(null);
  const [reference, setReference]     = useState<string | null>(null);

  async function pay() {
    // Call YOUR backend — never call Drexpay directly from the app
    const res = await fetch("https://yourapp.com/api/create-payment", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ amount: 25000, email: "customer@example.com" }),
    });
    const { url, reference } = await res.json();
    setReference(reference);
    setCheckoutUrl(url);
  }

  function handleSuccess(ref: string) {
    setCheckoutUrl(null);
    // ref may be empty if Drexpay doesn't append it to your redirectTo URL —
    // use the reference you stored above, or rely on your server-side webhook.
    console.log("Payment done, reference:", ref || reference);
  }

  return (
    <View style={styles.container}>
      <Pressable style={styles.btn} onPress={pay}>
        <Text style={styles.btnText}>Pay ₦25,000</Text>
      </Pressable>

      <DrexpayCheckout
        visible={!!checkoutUrl}
        checkoutUrl={checkoutUrl ?? ""}
        onSuccess={handleSuccess}
        onClose={() => setCheckoutUrl(null)}
        onError={(err) => console.error("Checkout error:", err)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  btn: {
    backgroundColor: "#7C3AED",
    paddingHorizontal: 24,
    paddingVertical: 14,
    borderRadius: 12,
  },
  btnText: { color: "#fff", fontWeight: "600", fontSize: 16 },
});

3 — Verify the webhook on your server

Always fulfill the order from the webhook, not just from onSuccess.

import { createHmac } from "crypto";

// In your webhook endpoint
app.post("/webhooks/drexpay", express.raw({ type: "application/json" }), (req, res) => {
  const sig = req.headers["x-drexpay-signature"];
  const expected = createHmac("sha512", process.env.DREXPAY_WEBHOOK_SECRET)
    .update(req.body)
    .digest("hex");

  if (sig !== expected) return res.status(401).end();

  const { event, data } = JSON.parse(req.body);
  if (event === "charge.success") {
    // Fulfill the order for data.reference
    await fulfillOrder(data.reference);
  }
  res.status(200).end();
});