Introducing Inline.js

Through our direct integrations, we've seen a significant increase in adoption, providing us with a deeper understanding of why businesses prefer direct charges over our traditional checkout options. The answer was clear: businesses want to keep their payment flow simple while maintaining full control over their branding. That's why we’re excited to introduce Chapa Inline.js — a JavaScript module designed to give developers full control over their payment checkout while ensuring a smooth integration process.

What Is Chapa Inline.js?

Chapa Inline.js is a simple yet powerful JavaScript library that integrates Chapa's direct charges into your web application. Whether you're running an e-commerce platform or providing services, this tool lets you embed a fully customizable checkout experience directly on your website.

With support for multiple payment methods like telebirr, CBEBirr, CoopPay-Ebirr, Mpesa, and more, you can cater your checkout to your customer preference. Is the payment method you need not supported by direct charges? No problem! With Inline, you can redirect users to Chapa's checkout, listing Chapa as one of the payment methods.

Your Checkout, Your Branding

The core strength of Inline.js is its ability to create a fully branded checkout experience. It’s no longer just about processing payments; it’s about delivering a checkout flow that feels like an extension of your website rather than an external third-party service.

Cool things about Inline:

• Dynamic Payment Form: Build a payment form that reflects your brand identity. Add your own logo, choose your colours, and customize the styling to match your design.
• Customizable Button Text and Styles: Want your "Pay Now" button to match your brand’s colour scheme? You have complete control over the appearance of every element.
• Pre-filled Forms: Save your customers' time by pre-filling phone numbers for returning users or customizing which payment methods are shown, ensuring a frictionless experience.
• Popup Handling for a Streamlined Experience: Upon successful payment, a customizable success popup will be displayed, allowing you to deliver a branded message or guide the user to the next steps — whether it’s tracking an order or providing feedback.
• Custom Callbacks and Return URLs: You maintain control over whether the transaction is successful or fails. You can define custom URLs to redirect users or set up specific actions using JavaScript callbacks.

And don’t worry about phone number validation; Inline validates phone numbers for you, ensuring smooth operation.

Effortless Integration

With Chapa Inline.js, you have two easy integration options:

• Using the Hosted Script: Simply include the script from Chapa’s CDN in your HTML file, and you’re good to go no need to worry about managing additional dependencies. (Recommended)
• npm Installation: For developers who prefer package management, Chapa Inline.js is available via npm. This gives you flexibility when bundling the script into your larger web application.

Why Your Branding Matters?

Imagine your customers' experience: they arrive at your checkout page, and instead of being redirected to a generic third-party payment portal, they are greeted by a payment form that blends seamlessly with the rest of your website. Your branding is visible throughout the entire process. The payment form matches the tone of your website, ensuring trust and consistency and making the checkout process feel truly integrated.

------
PS: Creating a branded checkout isn’t just about aesthetics; it’s about building trust.

When customers see the familiar look and feel of your brand at every touchpoint,

they’re more likely to complete their purchase.

-----

Reference

Github


Melkam Gize & Beal :)