How to Add Payment Gateway to Your App - Razorpay, Stripe & PayPal

Accept Payments in Your App

Codular supports 4 payment providers out of the box - no code required. Just drag, configure, and connect to flows.

Available Payment Components

Step 1: Add Razorpay Payment Button

• Open the Monetization category in the component palette
• Drag Razorpay Pay Button onto your screen
• In Properties, set:

- Razorpay Key ID - get from dashboard.razorpay.com → Settings → API Keys

- Amount - in paise (10000 = ₹100)

- Business Name - your company/store name

- Description - what the user is paying for

• Connect the onPaymentSuccess event to a flow

Step 2: Create Payment Flow

• Switch to Flows tab
• Create a flow connected to onPaymentSuccess:

- Event (start) → Set Variable (save payment ID) → Navigate to Thank You screen

• Create another flow for onPaymentError:

- Event → Show Alert ("Payment failed, please try again")

Step 3: Verify Payment (Important!)

Always verify payments on your server:

• Add a Verify Payment flow node after payment success
• Set the Server URL to your backend verification endpoint
• Your server should verify with Razorpay API before granting access

Using Stripe

Same steps as Razorpay, but:

• Use your Stripe Publishable Key from dashboard.stripe.com
• Amount is in cents (1000 = $10.00)
• Supports Apple Pay and Google Pay automatically

Google Play Billing

For selling digital products inside your app:

• Drag Google Play Billing component
• Set Product IDs (create in Google Play Console first)
• Choose Purchase Type: One-Time, Subscription, or Consumable
• Use Purchase Product flow node to trigger purchase
• Use Check Subscription flow node to verify active subscriptions

Pro Tips

• Always verify payments server-side - never trust the client
• Show a loading indicator during payment processing
• Handle all 3 events: success, error, dismissed
• Test in sandbox/test mode before going live
• For subscriptions, check status on every app launch

Start building at mobcraft.in.