React Native Integration

npm install react-native-customui@^2.3.0

pod 'RazorpayApplePay',
    :podspec => '../node_modules/react-native-customui/RazorpayApplePay.podspec'

cd ios && pod install

import Razorpay from 'react-native-customui';

const eligible = await Razorpay.canMakePayment('rzp_live_XXXXXXXXXX');

curl -X POST https://api.razorpay.com/v1/orders \
  -u rzp_live_XXXXXXXXXX:your_secret \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 50000,
    "currency": "INR",
    "receipt": "YOUR_ORDER_REF",
    "notes": { "orderId": "YOUR_ORDER_REF" }
  }'

import Razorpay from 'react-native-customui';

function onApplePayTapped() {
  Razorpay.open({
    key_id: 'rzp_live_XXXXXXXXXX',
    order_id: 'order_CuEzONfnOI86Ab',
    amount: '50000',          // in currency subunits (for example, paise)
    currency: 'INR',
    email: 'gaurav.kumar@example.com',
    contact: '9876543210',
    method: 'card',
    app: {
      name: 'apple_pay',
      apple_pay: {
        merchant_identifier: 'merchant.com.yourcompany.app',
      },
    },
  })
    .then(data => console.log(data.razorpay_payment_id))
    .catch(err => console.log(err.error));
}

Razorpay.open(options)
  .then(data => {
    const { razorpay_payment_id, razorpay_order_id, razorpay_signature } = data;
    // Send payment_id, order_id and signature to your server
    // for signature verification.
  })
  .catch(err => {
    const { code, description } = err.error;
    // Handle failure or cancellation
  });

{
    "razorpay_payment_id": "pay_XXXXXXXXXX",
    "razorpay_order_id":   "order_XXXXXXXXXX",
    "razorpay_signature":  "9ef4dffbfd84f1318f6739a3ce19f9d85851857ae648f114332d8401e0949a3d"
}

{
    "error": {
        "code":        "PAYMENT_CANCELLED",
        "description": "Customer dismissed the payment sheet.",
        "metadata": {
            "payment_id": "pay_XXXXXXXXXX"
        }
    }
}

{
  "amount": 50000,
  "currency": "INR",
  "receipt": "YOUR_ORDER_REF",
  "notes": { "orderId": "YOUR_ORDER_REF" }
}

import React, { useEffect, useState } from 'react';
import { Platform, Text, View } from 'react-native';
import Razorpay from 'react-native-customui';
import ApplePayButton from './ApplePayButton'; // your PKPaymentButton bridge

const KEY_ID = 'rzp_live_XXXXXXXXXX';
const MERCHANT_IDENTIFIER = 'merchant.com.yourcompany.app';

export default function CheckoutScreen({ orderId, amount, currency }) {
  const [eligible, setEligible] = useState(false);
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState('Ready');

  useEffect(() => {
    if (Platform.OS !== 'ios') return;
    Razorpay.canMakePayment(KEY_ID).then(setEligible);
  }, []);

  function onApplePayTapped() {
    if (busy) return;
    setBusy(true);
    Razorpay.open({
      key_id: KEY_ID,
      order_id: orderId,
      amount: String(amount),
      currency,
      email: 'gaurav.kumar@example.com',
      contact: '9876543210',
      method: 'card',
      app: {
        name: 'apple_pay',
        apple_pay: { merchant_identifier: MERCHANT_IDENTIFIER },
      },
    })
      .then(data => setStatus(`Success: ${data.razorpay_payment_id}`))
      .catch(err => setStatus(`Error: ${err.error.code}`))
      .finally(() => setBusy(false));
  }

  return (
    <View>
      <Text>{status}</Text>
      {eligible && (
        <ApplePayButton onPress={onApplePayTapped} disabled={busy} />
      )}
    </View>
  );
}