As a third and basic method to integrate MADFU as a payment option into your platform, you have three approaches:
1- Utilizing our API Endpoint: This endpoint facilitates the creation of a checkout order, where all payment information is sent within the request to enable customer payments via MADFU. The response will include orderId, merchantReference, invoiceCode, and checkoutLink. Remember to store either the invoiceCode or orderId in your databases for future reference regarding the order. You can then manage the transaction flow on your platform accordingly, including directing customers to the MADFU checkout page if necessary.
2- Auto-Configuration by MADFU: MADFU offers an auto-configuration option where the URL is dynamically updated based on the order status. You can depend on the success or failure URLs provided: Success URL Sample: {baseurl}/paymentResult?success=true Failure URL Sample: {baseurl}/paymentResult?success=false
3- Integration with Ease using JavaScript (JS): Follow our straightforward guide to seamlessly integrate with our system using JavaScript. You can utilize your target base URL:
- Staging: https://checkout-staging.madfu.com.sa
- Production: https://checkout.madfu.com.sa This method allows you to integrate MADFU directly into your platform's frontend using JavaScript. It provides flexibility and control over the checkout process. b. Add Madfu JS
<script src="{Base URL}/MadfuCheckout.js?v=0.1"></script>c. Configure and Open Madfu checkout page
Checkout.Checkout.configure = {
deviceType: <Value for Platform (Android or iOS)>
token: <Token Recived from Create Order Api>,
completeCallback: function (data) {
},
errorCallback: function (data) {
setTimeout(() => {
alert(JSON.stringify(data))
}, 3000);
},
cancelCallback: function () {
},
};
var url = Checkout.Checkout.getCheckoutUrl();
var $iframe = $("#framePaymentPage");
$iframe.attr("src", url);
$("#frameDiv").show();