Below is a step-by-step guide on how to integrate Mamo on your website with our inline payment solution.
The inline solution will load an iFrame within your page, allowing customers to pay through our supported payment methods, including Mastercard, Visa, Apple Pay, and Google Pay.
Backend integration
The APIs below are to be used for each of the corresponding features:
1- Create Payment Link:
For the customer to be able to checkout, a new payment link is created using the following POST request: https://mamopay.readme.io/reference/post_links
You can customize the payment link, the amount, title description, etc. However, for this integration to work as intended, the following fields need to be sent:
link_type: inline
email: customer's email
first_name & last_name: customer's full name to be auto-populated for a better checkout experience
This API will return a payment link that will be used on the front end.
2- Refunds:
In case of refunds, the refund API can be invoked for a specific payment: https://mamopay.readme.io/reference/post_charges-chargeid-refunds
This will expect the ID of the payment done (successful payment using a payment link) and the amount to be refunded.
3- Webhooks:
For reconciliation, we recommend using webhooks for callback: https://mamopay.readme.io/reference/post_webhooks
After registering the endpoints, Mamo will push callbacks with the status change of a payment by sending a charge object to the endpoints: https://mamopay.readme.io/reference/charge-object
The webhook will be sent according to the registered events; in this case, we recommend registering for the following events:
charge.failed: Notification for failed one-off payments
charge.succeeded: Notification for successful one-off payments
charge.refund_initiated: Notification for initializing the refund
charge.refunded: Notification for the successful refund
charge.refund_failed: Notification for the failed refund
Frontend integration
On the front end, the payment link generated in the first step needs to be loaded in an iFrame using the below sample code:
<head>
<script src='https://assets.mamopay.com/stable/checkout-inline-2.0.0.min.js'></script>
</head>
<body>
<div id='mamo-checkout-element'></div>
<script>
const mamoPay = new MamoPay();
mamoPay.addIframeToWebsite("mamo-checkout-element", paymentLink);
</script>
</body>
The payment link returned is simply passed in data-src, and the loaded javascript file will take care of the rest.
With this integration modal, you're free to customize your checkout experience (background, size & position of the iFrame) on the same page without redirecting the customer of showing them any popups, minimizing friction.
After a successful/failed payment, the customer will be redirected to whatever return_url or failure_return_url you sent in the payment link creation.
FAQs
Can inline be integrated with mobile?
Can inline be integrated with mobile?
Yes, you can embed the inline iFrame within a webview, provided the entire app isn't running solely within the webview.