Card Embedded Payment Widget
Checkout Session
Before loading the card widget on the platform, you have to call the intiate_order_session API endpoint to generate a Checkout Session.
This session ID will be used for the creation of relevant invoices on Sadad.
API endpoint
You can start the checkout session by calling the intiate_order_session endpoint.
Request
{
"ref_Number": "xxx",
"amount": "xxx",
"currency_Code": "xxx",
"customer_Name": "xxx",
"customer_Mobile": "xxxx",
"customer_Email": "xxxxx",
"PaymentGatewayCode": "CCCSSA" //if response shows payment method invalid contact your account manager to get your assigned gateway code
}
{
"ref_Number": "xxx",
"amount": "xxx",
"currency_Code": "xxx",
"customer_Name": "xxx",
"customer_Mobile": "xxxx",
"customer_Email": "xxxxx",
"PaymentGatewayCode": "CCCSSA", //if response shows payment method invalid contact your account manager to get your assigned gateway code
"Items": [
{
"name":"xxx",
"quantity":xx,
"amount":xx
},
{
"name":"xxx",
"quantity":xx,
"amount":xx
}
]
}
{
"ref_Number": "xxx",
"amount": "xxx",
"currency_Code": "xxx",
"customer_Name": "xxx",
"customer_Mobile": "xxxx",
"customer_Email": "xxxxx",
"PaymentGatewayCode": "CCCSSA", //if response shows payment method invalid contact your account manager to get your assigned gateway code
"Items": [
{
"name":"xxx",
"quantity":xx,
"amount":xx,
"supplierId": xx
},
{
"name":"xxx",
"quantity":xx,
"amount":xx,
"supplierId": xx
}
]
}
Response
{
"isValid": true,
"errorKey": null,
"response": {
"session_Id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
}
{
"isValid": false,
"errorKey": "ERROR",
"response": null
}
Usage
To show the card widget, you should use the returned session_Id instead of the value "CHECKOUT SESSION ID" in the below example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Pay using:</p>
<div id="sadad-card-element"></div>
<script src="https://sadadpay.net/embedded/card/card-process.min.js"></script>
<script>
var session_id = "XXXXXXXX";
var options = {
"lang": "en", //en or ar
"backgroundColor": "#f9f9f9", //leave empty if not set //style property
"fontFamily": "'Poppins', sans-serif", //"Poppins" or web standard fonts //style property
"fontSize": "13px", //style property
"fontColor": "#707070", //style property
"buttonBackgroudColor": "#f9f9f9", //style property
"buttonFontColor": "#707070", //style property
"textBoxFontColor": "#707070", //style property
"textBoxBackgroundColor": "#fff", //style property
"textBoxBorderColor": "#707070", //style property
}
Sadad.Configure(session_id, options, false); //true for sandbox environment
//next function is callback on payment error
var SadadOnError = function (error) {
//payment has fialed
console.log(error);
}
var SadadOnSuccess = function (result) {
//payment successeded
//USE THE RETURNED INVOICE ID result.invoice_id TO VERIFY PAYMENT USING SADAD API BEFORE PROCEEDING TO GET TRANSACTION DETAILS AND CONFIMING OF SUCCESSFUL PAYMENT
console.log(result);
}
</script>
</body>
</html>
Callback
IMPORTANT
You need to verify the payment information by calling the API to get Invoice payment to confirm that the information is correct and valid before proceeding with your action., read invoice ID from the success callback function "SadadOnSuccess"
- When the Sadad invoice gets paid, SadadOnSuccess callback function will be triggered.
- Use the Invoice ID from the result input on the SadadOnSuccess to request Invoice details
- Sadad is not responsible for proceeding without validating and verifying the payment status of the Sadad invoice.