Payment button

The payment button opens checkout on your own page, either as a popup or inline, using only your publishable key. Use it when your payment flow runs in the browser. If you control a backend, you can also create the checkout there and redirect to its url.

1. Add the SDK

<script src="https://unpkg.com/intasend-checkout-sdk"></script>

Or, for React, Vue and other bundlers:

npm install intasend-checkout-sdk

import 'intasend-checkout-sdk'; // sets window.IntaSend

The SDK used to be published as intasend-inlinejs-sdk. It still works, but new integrations should use intasend-checkout-sdk.

2. Add a button

Any element with the class intaSendPayButton opens checkout when clicked:

<button class="intaSendPayButton" data-amount="1500" data-currency="KES"
        data-email="[email protected]" data-api_ref="order-123">Pay now</button>

Each data-* attribute is sent as a checkout field. Write field names with underscores as they are (data-api_ref, data-phone_number, data-first_name), because data-phone-number would be sent as phoneNumber. Fields you prefill are skipped on the payment form.

3. Initialise

Add this before </body>:

<script>
  new window.IntaSend({
    publicAPIKey: "ISPubKey_test_xxxx",
    live: false, // true with a live key
  })
    .on("COMPLETE", (results) => console.log("Paid", results))
    .on("FAILED", (results) => console.log("Failed", results))
    .on("IN-PROGRESS", (results) => console.log("In progress", results));
</script>

Option	Default	Description
publicAPIKey		Your publishable key
live	false	true for live, false for sandbox. It must match the key.
redirectURL		If set, the customer is sent here on COMPLETE
mode	popup	popup or inline
inlineContainer	checkoutElement	ID of the element that holds the inline checkout
element	intaSendPayButton	Class name of your pay buttons

In React or Vue, initialise once the button is rendered, for example in useEffect or onMounted.

Events

Event	When
IN-PROGRESS	The customer has started paying
COMPLETE	The payment succeeded
FAILED	The payment failed

Events are only meant for updating your page. Confirm payment on your server with the collection_event webhook or payment status before you fulfil the order.

Inline mode

To embed checkout in your page instead of a popup, add a container and start checkout with run():

<div id="checkoutElement"></div>

<script>
  new window.IntaSend({publicAPIKey: "ISPubKey_test_xxxx", live: false, mode: "inline"})
    .on("COMPLETE", (results) => console.log("Paid", results))
    .run({amount: 1500, currency: "KES", api_ref: "order-123", email: "[email protected]"});
</script>

run() also works in popup mode, if you'd rather start checkout from your own code than with a button.

Google Pay and Apple Pay

They appear automatically when they're enabled in your payment settings. No extra code is needed. On iOS, checkout opens in a new tab so that Apple Pay and Google Pay can run.