SendMate Inline Checkout

SendMate Inline Checkout allows you to embed checkout as a popup or iframe on external websites.

Installation

Via npm

npm install @sendmate/inline-js

Via CDN (unpkg.com)

<!-- Simple URL (uses unpkg field from package.json) -->
<script src="https://unpkg.com/@sendmate/inline-js"></script>

<!-- Or with version -->
<script src="https://unpkg.com/@sendmate/inline-js@latest"></script>

<!-- Or direct path -->
<script src="https://unpkg.com/@sendmate/inline-js@latest/dist/sendmate-checkout.umd.js"></script>

Usage

Basic Setup

<script src="https://unpkg.com/@sendmate/inline-js"></script>
<script>
  // Create an instance
  const checkout = new SendMateCheckout();
  
  // Initialize (apiBaseUrl and frontendUrl are auto-detected based on public key)
  checkout.init({
    publicKey: 'your-public-key'
  });

  // Open checkout
  checkout.open({
    amount: '100',
    currency: 'KES',
    description: 'Payment for order'
  }, 
  (session) => {
    console.log('Payment successful!', session);
  },
  () => {
    console.log('Payment cancelled');
  },
  (error) => {
    console.error('Payment error:', error);
  });
</script>

ES Module

import SendMateCheckout from '@sendmate/inline-checkout';

const checkout = new SendMateCheckout();
checkout.init({
  publicKey: 'your-public-key',
  apiBaseUrl: 'https://api.your-domain.com',
  frontendUrl: 'https://your-domain.com'
});

checkout.open({
  amount: '100',
  currency: 'KES',
  description: 'Payment for order'
}, onSuccess, onCancel, onError);

Development

Run Demo

npm run dev

This starts the demo application at http://localhost:3000

Build Library

npm run build:lib

This builds the library for distribution in the dist folder.

Build Demo

npm run build:demo

This builds the demo application.

Publishing

The library is configured to be published to npm and can be accessed via unpkg.com:

https://unpkg.com/@sendmate/inline-checkout@latest/dist/sendmate-checkout.umd.js

API Reference

init(options)

Initialize the SendMate Checkout library.

Parameters:

• publicKey (string, required): Your SendMate public key
• apiBaseUrl (string, required): API base URL
• frontendUrl (string, required): Frontend URL for checkout
• popupWidth (number, optional): Popup width in pixels (default: 800)
• popupHeight (number, optional): Popup height in pixels (default: 600)
• iframeMode (boolean, optional): Use iframe instead of popup (default: false)

open(checkoutData, onSuccess, onCancel, onError)

Open checkout popup/iframe.

Parameters:

• checkoutData (object, required):
  • amount (string, required): Payment amount
  • currency (string, required): Currency code (e.g., 'KES', 'USD')
  • description (string, optional): Payment description
  • returnUrl (string, optional): URL to redirect after successful payment
  • cancelUrl (string, optional): URL to redirect after cancellation
  • paymentMethods (array, optional): Payment methods (default: ['mpesa', 'card'])
  • metadata (object, optional): Additional metadata
• onSuccess (function, optional): Callback when payment is successful
• onCancel (function, optional): Callback when payment is cancelled
• onError (function, optional): Callback when an error occurs

License

MIT