import axios from 'axios';

const FawaterakPayment = () => {
  const [paymentCompleted, setpaymentCompleted] = useState(false);
  const [fawaterkurl, setfawaterkurl] = useState(null);


  const API_URL = 'https://staging.fawaterk.com/api/v2/invoiceInitPay';
  const API_TOKEN = 'd83a5d07aaeb8442dcbe259e6dae80a3f2e21a3a581e1a5acd';
  const PAYMENT_ID = 4; // 2=Visa-MasterCard, 3=Fawry, 4=Meeza

const generateFawaterksession = async () => {
   const data = {
    payment_method_id: PAYMENT_id,
    cartTotal: '100',
    currency: 'EGP',
    customer: {
      first_name: 'test',
      last_name: 'test',
      email: 'test@test.test',
      phone: '01000000000',
      address: 'test address',
    },
    redirectionUrls: {
      successUrl: 'https://dev.fawaterk.com/success',
      failUrl: 'https://dev.fawaterk.com/fail',
      pendingUrl: 'https://dev.fawaterk.com/pending',
    },
    cartItems: [
      {
        name: 'test',
        price: '100',
        quantity: '1',
      },
    ],
  };

  const config = {
    method: 'post',
    url: API_URL,
    headers: {
      Authorization: `Bearer ${API_TOKEN}`,
      'Content-Type': 'application/json',
    },
    data: data,
  };

  try {
    const response = await axios(config);
    const responseData = response.data;
    if (responseData) {
      setfawaterkurl(responseData?.data.payment_data?.redirectTo);
      setpaymentCompleted(true);
    }
  } catch (error) {
    console.log(error);
  }
};

  useEffect(() => {
    generateFawaterksession();
  }, []);

  const handleNavigationStateChange = (newNavState: { url: any }) => {
    // Check if the URL has changed to handle the response or perform further actions
    console.log('newNavState', newNavState);

    // Replace 'https://dev.fawaterk.com/' with your redirectionUrls
    if (newNavState.url.includes('https://dev.fawaterk.com/')) {
      // Handle the response or perform any required actions here
      newNavState?.url.includes('success')
        ? console.log('success')
        : console.log('Cancelled');
    }
  };
  

  return (
    <View style={{ flex: 1 }}>
      {paymentCompleted ? (
        <WebView
          source={{ uri: fawaterkurl }}
          onNavigationStateChange={handleNavigationStateChange}
          
        />
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

export default FawaterakPayment;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private boolean paymentCompleted = false;
    private String fawaterkurl = null;

    private static final String API_URL = "https://staging.fawaterk.com/api/v2/invoiceInitPay";
    private static final String API_TOKEN = "d83a5d07aaeb8442dcbe259e6dae80a3f2e21a3a581e1a5acd";
    private static final int PAYMENT_ID = 4;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        generateFawaterksession();

        WebView webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // Check if the URL has changed to handle the response or perform further actions
                if (url.contains("https://dev.fawaterk.com/")) {
                    // Handle the response or perform any required actions here
                    if (url.contains("success")) {
                        System.out.println("success");
                    } else {
                        System.out.println("Cancelled");
                    }
                }
                return false;
            }
        });

        if (paymentCompleted) {
            webView.loadUrl(fawaterkurl);
        }
    }

 public void generateFawaterksession() {
    OkHttpClient client = new OkHttpClient();

    MediaType mediaType = MediaType.parse("application/json");
    Map<String, Object> requestBody = new HashMap<>();
    requestBody.put("payment_method_id", PAYMENT_ID);
    requestBody.put("cartTotal", "100");
    requestBody.put("currency", "EGP");

    Map<String, String> customer = new HashMap<>();
    customer.put("first_name", "test");
    customer.put("last_name", "test");
    customer.put("email", "test@test.test");
    customer.put("phone", "01000000000");
    customer.put("address", "test address");
    requestBody.put("customer", customer);

    Map<String, String> redirectionUrls = new HashMap<>();
    redirectionUrls.put("successUrl", "https://dev.fawaterk.com/success");
    redirectionUrls.put("failUrl", "https://dev.fawaterk.com/fail");
    redirectionUrls.put("pendingUrl", "https://dev.fawaterk.com/pending");
    requestBody.put("redirectionUrls", redirectionUrls);

    Map<String, Object> cartItem = new HashMap<>();
    cartItem.put("name", "test");
    cartItem.put("price", "100");
    cartItem.put("quantity", "1");
    requestBody.put("cartItems", new Object[] { cartItem });

    RequestBody body = RequestBody.create(mediaType, new Gson().toJson(requestBody));

    Request request = new Request.Builder()
        .url(API_URL)
        .addHeader("Authorization", "Bearer " + API_TOKEN)
        .addHeader("Content-Type", "application/json")
        .post(body)
        .build();

    try {
        Response response = client.newCall(request).execute();
        if (response.isSuccessful()) {
            String responseData = response.body().string();
            JSONObject json = new JSONObject(responseData);
            JSONObject paymentData = json.getJSONObject("data").getJSONObject("payment_data");
            String redirectTo = paymentData.optString("redirectTo");
            if (!redirectTo.isEmpty()) {
                fawaterkurl = redirectTo;
                paymentCompleted = true;
            }
        }
    } catch (IOException | JSONException e) {
        e.printStackTrace();
    }
}
}

import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import okhttp3.MediaType.Companion.toMediaTypeOrNull
import okhttp3.OkHttpClient
import okhttp3.Request
import okhttp3.RequestBody.Companion.toRequestBody
import org.json.JSONObject
import java.io.IOException

import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private var paymentCompleted = false
    private var fawaterkurl: String? = null

    private val API_URL = "https://staging.fawaterk.com/api/v2/invoiceInitPay"
    private val API_TOKEN = "d83a5d07aaeb8442dcbe259e6dae80a3f2e21a3a581e1a5acd"
    private val PAYMENT_ID = 4

    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        generateFawaterksession()

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true

        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                // Check if the URL has changed to handle the response or perform further actions
                if (url.contains("https://dev.fawaterk.com/")) {
                    // Handle the response or perform any required actions here
                    if (url.contains("success")) {
                        println("success")
                    } else {
                        println("Cancelled")
                    }
                }
                return false
            }
        }

        if (paymentCompleted) {
            webView.loadUrl(fawaterkurl)
        }
    }

 fun generateFawaterksession() {
    val client = OkHttpClient()

    val mediaType = "application/json".toMediaTypeOrNull()
    val requestBody = JSONObject()
    requestBody.put("payment_method_id", PAYMENT_ID)
    requestBody.put("cartTotal", "100")
    requestBody.put("currency", "EGP")

    val customer = JSONObject()
    customer.put("first_name", "test")
    customer.put("last_name", "test")
    customer.put("email", "test@test.test")
    customer.put("phone", "01000000000")
    customer.put("address", "test address")
    requestBody.put("customer", customer)

    val redirectionUrls = JSONObject()
    redirectionUrls.put("successUrl", "https://dev.fawaterk.com/success")
    redirectionUrls.put("failUrl", "https://dev.fawaterk.com/fail")
    redirectionUrls.put("pendingUrl", "https://dev.fawaterk.com/pending")
    requestBody.put("redirectionUrls", redirectionUrls)

    val cartItem = JSONObject()
    cartItem.put("name", "test")
    cartItem.put("price", "100")
    cartItem.put("quantity", "1")
    requestBody.put("cartItems", listOf(cartItem))

    val request = Request.Builder()
        .url(API_URL)
        .addHeader("Authorization", "Bearer $API_TOKEN")
        .addHeader("Content-Type", "application/json")
        .post(requestBody.toString().toRequestBody(mediaType))
        .build()

    try {
        val response = client.newCall(request).execute()
        if (response.isSuccessful) {
            val responseData = response.body?.string()
            val json = JSONObject(responseData)
            val paymentData = json.getJSONObject("data").getJSONObject("payment_data")
            val redirectTo = paymentData.optString("redirectTo")
            if (!redirectTo.isNullOrEmpty()) {
                fawaterkurl = redirectTo
                paymentCompleted = true
            }
        }
    } catch (e: IOException) {
        e.printStackTrace()
    }
}
}

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    private var paymentCompleted = false
    private var fawaterkurl: String?

    private let API_URL = "https://staging.fawaterk.com/api/v2/invoiceInitPay"
    private let API_TOKEN = "d83a5d07aaeb8442dcbe259e6dae80a3f2e21a3a581e1a5acd"
    private let PAYMENT_ID = 4

    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        generateFawaterksession()

        webView = WKWebView(frame: view.frame)
        webView.navigationDelegate = self
        view.addSubview(webView)

        if paymentCompleted, let url = fawaterkurl, let webViewUrl = URL(string: url) {
            let request = URLRequest(url: webViewUrl)
            webView.load(request)
        }
    }

func generateFawaterksession() {
    let url = URL(string: API_URL)!
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.addValue("Bearer \(API_TOKEN)", forHTTPHeaderField: "Authorization")
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")
    
    let parameters: [String: Any] = [
        "payment_method_id": PAYMENT_ID,
        "cartTotal": "100",
        "currency": "EGP",
        "customer": [
            "first_name": "test",
            "last_name": "test",
            "email": "test@test.test",
            "phone": "01000000000",
            "address": "test address"
        ],
        "redirectionUrls": [
            "successUrl": "https://dev.fawaterk.com/success",
            "failUrl": "https://dev.fawaterk.com/fail",
            "pendingUrl": "https://dev.fawaterk.com/pending"
        ],
        "cartItems": [
            [
                "name": "test",
                "price": "100",
                "quantity": "1"
            ]
        ]
    ]
    
    do {
        request.httpBody = try JSONSerialization.data(withJSONObject: parameters, options: [])
        
        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                print(error)
                return
            }
            
            if let data = data {
                do {
                    let responseData = try JSONSerialization.jsonObject(with: data, options: [])
                    if let json = responseData as? [String: Any],
                       let paymentData = json["data"] as? [String: Any],
                       let redirectTo = paymentData["redirectTo"] as? String {
                        self.fawaterkurl = redirectTo
                        self.paymentCompleted = true
                    }
                } catch {
                    print(error)
                }
            }
        }
        
        task.resume()
    } catch {
        print(error)
    }
}


    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        // Check if the URL has changed to handle the response or perform further actions
        if let url = navigationAction.request.url, url.absoluteString.contains("https://dev.fawaterk.com/") {
            // Handle the response or perform any required actions here
            if url.absoluteString.contains("success") {
                print("success")
            } else {
                print("Cancelled")
            }
        }
        decisionHandler(.allow)
    }
}

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class FawaterakPayment extends StatefulWidget {
  @override
  _FawaterakPaymentState createState() => _FawaterakPaymentState();
}

class _FawaterakPaymentState extends State<FawaterakPayment> {
  bool paymentCompleted = false;
  String? fawaterkurl;

  final apiUrl = 'https://staging.fawaterk.com/api/v2/invoiceInitPay';
  final apiToken = 'd83a5d07aaeb8442dcbe259e6dae80a3f2e21a3a581e1a5acd';
  final paymentId = 4; // 2=Visa-MasterCard, 3=Fawry, 4=Meeza

  void generateFawaterksession() async {
    final data = {
      'payment_method_id': paymentId,
      'cartTotal': '100',
      'currency': 'EGP',
      'customer': {
        'first_name': 'test',
        'last_name': 'test',
        'email': 'test@test.test',
        'phone': '01000000000',
        'address': 'test address',
      },
      'redirectionUrls': {
        'successUrl': 'https://dev.fawaterk.com/success',
        'failUrl': 'https://dev.fawaterk.com/fail',
        'pendingUrl': 'https://dev.fawaterk.com/pending',
      },
      'cartItems': [
        {
          'name': 'test',
          'price': '100',
          'quantity': '1',
        },
      ],
    };

    final headers = {
      'Authorization': 'Bearer $apiToken',
      'Content-Type': 'application/json',
    };

    try {
      final response = await http.post(
        Uri.parse(apiUrl),
        headers: headers,
        body: json.encode(data),
      );

      final responseData = json.decode(response.body);
      if (responseData != null) {
        setState(() {
          fawaterkurl = responseData['data']['payment_data']['redirectTo'];
          paymentCompleted = true;
        });
      }
    } catch (error) {
      print(error);
    }
  }

  @override
  void initState() {
    super.initState();
    generateFawaterksession();
  }

  void handleNavigationStateChange(String newUrl) {
    // Check if the URL has changed to handle the response or perform further actions
    print('newUrl: $newUrl');

    // Replace 'https://dev.fawaterk.com/' with your redirectionUrls
    if (newUrl.contains('https://dev.fawaterk.com/')) {
      // Handle the response or perform any required actions here
      if (newUrl.contains('success')) {
        print('success');
      } else {
        print('Cancelled');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: paymentCompleted
          ? WebView(
              initialUrl: fawaterkurl,
              navigationDelegate: (NavigationRequest request) {
                handleNavigationStateChange(request.url);
                return NavigationDecision.navigate;
              },
              javascriptMode: JavascriptMode.unrestricted,
            )
          : Center(
              child: Text('Loading...'),
            ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: FawaterakPayment(),
  ));
}

**Please note that the code samples provided here are just examples, and you may need to customize them according to your specific application's requirements.

handleNavigationStateChange Function for React Native

The handleNavigationStateChange function is responsible for handling changes in the WebView's navigation state. It is typically used in conjunction with a WebView component to capture and handle the response from a redirected URL.

Usage

The function takes a single argument, newNavState, which is an object containing information about the URL being loaded. Here's how you can use the handleNavigationStateChange function:

Check if the URL has changed:

Use console.log to log the newNavState object. This provides information about the new URL being loaded, allowing you to inspect the navigation state.
Handle the response or perform further actions:

Replace the base URL 'https://dev.fawaterk.com/' with your actual redirection URL. This ensures that the response URL belongs to the expected domain.
Modify the condition to match your specific requirements for handling the response URL.
Perform actions based on the response:

Inside the condition, you can define different actions based on the response URL. For example, you can check if the URL includes 'success' to handle a successful payment or perform different actions for other scenarios.
Customize the actions within the condition to suit your application's needs. For instance, you can update the component state, display a success message, or navigate to a different screen in your application.

You can customize the actions inside the condition block to handle different response scenarios according to your specific application logic.