To add payments to your app: open a merchant account with a gateway that supports local methods such as mada, Apple Pay, Tabby and Tamara; use the gateway's hosted payment page or secure fields instead of collecting card data yourself; confirm success on your server through a webhook before confirming the order; and issue a receipt or invoice with the right VAT. In Fanann you describe what you want, all of this is built, and you connect your own gateway account.
- how to add payments to an app
- how to integrate a payment gateway in my app
- accept mada payments in my app
- add apple pay to website
- payment webhook how it works
- integrate tabby and tamara
How do you add payments to your app? The full picture
To add payments to your app, you go through five steps: choose a payment gateway and open a merchant account; build a checkout that shows the right methods for your customer; confirm the payment on your server; issue a receipt or invoice; and prepare for refunds and disputes. Each step has details, but the idea is simple: the gateway handles cards and money, your app handles the order and the customer.
In the Gulf, payments are not just Visa and Mastercard. Saudi customers expect mada and Apple Pay, and many split payments with Tabby or Tamara. Kuwaiti customers expect KNET, Bahrainis Benefit, and in the UAE Visa, Mastercard and Apple Pay, with the local Jaywan card now arriving. For each method in detail, read the local payments guide.
This guide explains each step in plain language, with the common mistakes that cost app owners money and customer trust, plus a copy-ready prompt for Fanann.
Step 1: choose a gateway and set up your merchant account
A payment gateway is the company that takes card details securely, talks to the bank and settles money to you. When choosing, weigh these points:
| Criterion | Why it matters | Question to ask the gateway |
|---|---|---|
| Local methods | Customers leave if their method is missing | Do you support mada, Apple Pay, STC Pay, Tabby, Tamara or KNET? |
| Onboarding requirements | Some gateways require a commercial register | Which documents do you need for my activity? |
| Settlement time | Affects cash flow | When does money reach my bank account? |
| Fees | Vary by method and volume | What are the fees per method, and are there fixed fees? |
| Docs and support | Determines how easy integration is | Is there a sandbox, clear documentation and local support? |
| Refunds and disputes | Protect your customer relationship | How do full and partial refunds work? |
In Saudi Arabia, gateways such as Moyasar, Tap, HyperPay and PayTabs are widely used; in the UAE, Network International, Telr and Checkout.com. For help choosing, see best payment gateway in Saudi Arabia and best payment gateway in the UAE.
Step 2: checkout, hosted or embedded?
There are two common ways to show payment in your app, and both keep card data away from your server:
- The customer goes to the gateway's page and returns
- Fastest to integrate with the lightest security burden
- Less control over look and experience
- Good for a start and a first version
- Payment happens on your page in secure gateway fields
- Smoother experience and more design control
- Needs more careful integration and testing
- Worth it as order volume grows
Either way, design checkout for Gulf customers:
- Show Apple Pay first on iPhones, and mada clearly for Saudi cards.
- Show Tabby or Tamara installments next to the price, not buried at the bottom.
- Show the total including VAT and delivery before the pay button.
- Make the page Arabic right-to-left, with clear numbers and the right currency.
- Keep fields to a minimum and save the address for next time.
Step 3: confirm payment on the server with a webhook
This is the step many people skip, and it causes most 'paid' orders that were never paid. When a customer lands on a 'payment successful' screen, that is not enough to confirm the order: they may close the app before returning, or the screen could be tampered with. The right way is for the gateway to send a direct notification to your server, called a webhook, which your server verifies before confirming the order.
- 1Create the order as 'awaiting payment'
Before sending the customer to pay, save the order and amount in the database.
- 2Send the customer to pay
Through the gateway page or embedded fields, with the order number as a reference.
- 3Receive the webhook
The gateway tells your server the result: success, failure or cancellation.
- 4Verify the notification
Confirm it really came from the gateway and that amount and currency match the order.
- 5Update the order
Mark it 'paid', then send the confirmation and receipt to the customer.
- 6Handle duplicates
The same notification can arrive more than once; never confirm or invoice twice.
Step 4: receipts, invoices and VAT
After a successful payment, customers expect an instant receipt by email, WhatsApp or in the app. In many cases you must also issue a correct tax invoice.
| Item | Saudi Arabia | UAE |
|---|---|---|
| VAT | 15% (ZATCA) | 5% (FTA) |
| E-invoicing | E-invoices with a QR code, with Fatoora integration rolling out in waves | Phased rollout from 2027 through an Accredited Service Provider; B2C out of scope for now |
| What your app needs | VAT calculation and QR-coded invoices with sequential numbers | VAT calculation and tax invoices with the required details |
Fanann issues QR-coded e-invoices with VAT calculated, but you still need to make sure your business settings are right and match your obligations.
Step 5: refunds, cancellations and disputes
An app that handles refunds well earns customer trust. Prepare these before launch:
- A refund button in the admin panel that calls the gateway directly, full or partial.
- Refund permission for specific roles only, with a log of who did what and when.
- Automatic order and stock updates after a refund.
- For installment payments, confirm the refund flow with Tabby or Tamara.
- A clear refund policy in the app that matches what you actually do.
For the full details, read refunds and chargebacks in the Gulf.
How Fanann builds payments into your app
In Fanann you do not write integration code yourself. You describe how you want to get paid, and the agent builds the checkout, order states, webhook handling, receipts, invoices and the refund button in the admin panel. Then you connect your own merchant account, so money goes straight to you.
Add payments to the restaurant ordering app we built. I want an Arabic right-to-left checkout that shows Apple Pay first on iPhone, then mada and Visa/Mastercard cards, then Tabby and Tamara installments for orders above a limit I set, and cash on delivery as the last option. Save the order as 'awaiting payment' before redirecting to the gateway, and only confirm it after a verified webhook that matches the amount. Do not store any card data. After success, send a receipt on WhatsApp and issue a QR-coded e-invoice with 15% VAT. In the admin panel, add a full or partial refund button for managers only, with an activity log. Turn on test mode first.
Try it in FanannChecklist before your first real payment
- Test every payment method in test mode, including declined payments.
- Confirm orders only become paid after the webhook arrives.
- Make a small real payment, then refund it in full.
- Check the receipt and invoice: name, VAT, number, QR code.
- Confirm the money reaches your bank account in the expected time.
Key takeaways
- Never store card data in your app; use the gateway's hosted page or secure fields.
- Do not confirm an order from the success screen alone; confirm it when the gateway's webhook reaches your server.
- In the Gulf, order payment methods for your customer: mada and Apple Pay in Saudi Arabia, KNET in Kuwait, Benefit in Bahrain.
- Receipts and invoices are part of payments: 15% VAT in Saudi Arabia and 5% in the UAE, plus e-invoicing rules.
- Test every method in test mode, then with a small real amount, and try a refund before launch.
Frequently asked questions
How do I integrate a payment gateway into my app?
Can I accept online payments without a commercial register?
How do I add Apple Pay to my app or website?
How do I integrate Tabby and Tamara?
Should I store card details in my app?
Ask your AI assistant about this
Copy this prompt into the AI assistant you use, then add the details of your own case.
I am reading this guide: “How to add payments to your app: gateways, checkout and receipts” https://fanann.com/en/blog/add-payments-to-your-app/ My question: how to add payments to an app Use that page as a source and explain the answer step by step for my situation, tell me what to check before I start, and cite the page link.