Fawaterak IFrame

The fastest way to build payment forms hosted on fawaterak.

This is how to embed Fawaterak payments into your own website using IFrame, the plugin lists
your activated payment methods and users can easily choose the payment method they need to
pay with it .

Steps:

Before starting, login to Fawaterak dashboard and from left side menu > Integrations > Fawaterak:

Update IFrame domains with the domains will load the IFrame, comma separated of multi domains.

Each Domain must be in the HTTPS protocol and without "/" at the end.

First Step , you need to include Fawaterak plugin into your checkout page:

JavaScript

<script src="https://app.fawaterk.com/fawaterkPlugin/fawaterkPlugin.min.js"></script>

Second Step , Append Fawaterk div with id fawaterkDivId in any place in your checkout page:

HTML

<div id="fawaterkDivId"></div>

Third step : Prepare plugin object data:

javascript

var pluginConfig = {
            envType: "test",
            hashKey: "HASH-KEY",
            style:{
              listing:"horizontal"
            },
            version:"0",
            requestBody: {
                "cartTotal": "50",
                "currency": "EGP",
                "customer": {
                    "first_name": "test",
                    "last_name": "fawaterk",
                    "email": "[email protected]",
                    "phone": "0123456789",
                    "address": "test address"
                },
                "redirectionUrls": {
                    "successUrl": "https://dev.fawaterk.com/success",
                    "failUrl": "https://dev.fawaterk.com/fail",
                    "pendingUrl": "https://dev.fawaterk.com/pending"
                },
                "cartItems": [{
                        "name": "this is test oop 112252",
                        "price": "25",
                        "quantity": "1"
                    },
                    {
                        "name": "this is test oop 112252",
                        "price": "25",
                        "quantity": "1"
                    }
                ],
                "payLoad": {
                  "custom_field1":"xyz",
                  "custom_field2":"xyz2"
                }
            }
        };

Key	M/O	Value
envType	Mandatory	test or live
hashKey	Mandatory	HMAC generated key, check here
version	Optional	(string/integer) this is for one domain and multi vendor accounts so, if you set version to 1 you have to add "?version=1" at your Fawaterak dashboard IFRAM DOMAINS. Default 0, in this case you don't have to add "?version=0"
style.listing	Optional	vertical (default) or horizontal, this is for listing payment icons. check "Horizontal view" image below.
requestBody.cartTotal	Mandatory	cartTotal: total amount to pay payLoad: (OPTIONAL), to be recieved in the paid webhook.
requestBody.currency	Mandatory	currency: EGP/USD/EUR...
requestBody.customer	Mandatory	first_name: Mandatory last_name: Mandatory customer_unique_id: Mandatory for tokenization save card option
requestBody.payLoad	Optional	payLoad: to be recieved in the paid webhook.
redirectionUrls	Mandatory	successUrl: Redirect URL after payment success. failUrl: Redirect URL after payment fails. pendingUrl: Redirect URL after payment pending.
cartItems	Mandatory	Items details.

Finally : You need to call fawaterkCheckout(pluginConfig); javascript function.

JavaScript

fawaterkCheckout(pluginConfig);

Horizontal view:

HASH-KEY:

Fawaterk uses hashing to ensure that Payment UI and responses shared between your application and Fawaterk. We use SHA256 hashing for that.

hashKey generation uses HMAC SHA256 Crypto mechanism, you should generate the hash from your backend and is implemented as explained below:

php

function generateHashKey($data){
    $secretKey = "FAWATERAK_VENDOR_KEY";
    $queryParam = "Domain=YOUR_WEBSITE_DOMAIN&ProviderKey=FAWATERAK_PROVIDER_KEY";
    $hash = hash_hmac( 'sha256' , $queryParam , $secretKey ,false);
    return $hash;
}

FAWATERAK_VENDOR_KEY -> Login to Fawaterak dashboard > left side menu > Integrations > Fawaterak > API Key

FAWATERAK_PROVIDER_KEY -> Login to Fawaterak dashboard > left side menu > Integrations > Fawaterak > Provider Key

There is an online tool for HMAC generation you can check it here