Payment Button Element

Collect a payment using IntaSend Payment Button

IntaSend provides multiple ways for you to add payment to your website or application. These options are:

• Payment Button - Simply add the IntaSend Payment Button to your site. We'll take care of the rest
• Checkout Link API - You generate and send a payment link to your customers. IntaSend will handle payment on your behalf and adequately update you on the status.

The choice of the options above entirely depends on how your application is set up and how you would like to handle the payments. To give you a hint on whether to choose the Payment Button or Checkout Link, the following might be handy:

• Do you use JavaScript and want to implement this on the frontend and handle everything from there? The payment button is recommended.
• Do you use languages such as Python, Java, PHP, Node, etc., and do you have control of the backend? Then the Checkout Link option might be the right way to go.

How to add IntaSend Payment Button on your website

1. Install IntaSend plugin

Add the latest IntaSend web plugin before closing your </head> tag

<script src="https://unpkg.com/[email protected]/build/intasend-inline.js"></script>

yarn add intasend-inlinejs-sdk
or
npm install intasend-inlinejs-sdk

2. Add the payment button

Add the IntaSend standard button where you want the customers to click and initiate checkout.

<button class="intaSendPayButton" data-amount="10" data-currency="KES">Pay Now</button>

return(
  <div>
  	<button className="intaSendPayButton" data-amount="10" data-currency="KES">Pay Now</button>
  </div>
)

<template>
	<div>
		<button class="intaSendPayButton" data-amount="10" data-currency="KES">Pay Now</button>
  </div>
</template>

Note: For standard button integration, IntaSend uses the class name to intaSendPayButton to recognize the button and trigger the payment action on click. On the payment button, you can add already available options e.g., amount, currency, customer emails, etc using the data-* attribute. Learn more on the available payment data options here.

3. Complete setup

Complete setup by setting your publishable key and other options, e.g., redirect URL. Access your public API key from your account under settings - API keys panel. IntaSend also provides a sandbox environment for API Testing

📘

Testing your implementation

Get test publishable key here https://sandbox.intasend.com/ (No sign-up needed).

<script>

  new window.IntaSend({
  publicAPIKey: "<REPLACE-WITH-YOUR-PUBLISHABLE-KEY>",
  live: false //set to true when going live
  })
  .on("COMPLETE", (results) => {console.log("Do something on success", results)})
  .on("FAILED", (results) => {console.log("Do something on failure", results)})
  .on("IN-PROGRESS", (results) => {console.log("Payment in progress status", results)})

</script>

import 'intasend-inlinejs-sdk'

function MyScreen(){
  
  new window.IntaSend({
    publicAPIKey: "<Your Public Key>",
    live: false //or true for live environment
  })
  .on("COMPLETE", (response) => { console.log("COMPLETE:", response) })
  .on("FAILED", (response) => { console.log("FAILED", response) })
  .on("IN-PROGRESS", () => { console.log("INPROGRESS ...") })
  
}

return(
  <div>
  	<button className="intaSendPayButton" data-amount="10" data-currency="KES">Pay Now</button>
  </div>
)

export default MyScreen

<script setup>
import 'intasend-inlinejs-sdk'

onMounted( async () => {
  new window.IntaSend({
    publicAPIKey: "<Your Public Key>",
    live: false //or true for live environment
  })
  .on("COMPLETE", (response) => { console.log("COMPLETE:", response) })
  .on("FAILED", (response) => { console.log("FAILED", response) })
  .on("IN-PROGRESS", () => { console.log("INPROGRESS ...") })
  
})


</script>

IntaSend uses events to communicate the status of the transaction. Events will be emitted on COMPLETE, FAILED, and IN-PROGRESS state. From the example above, the on events will also a results which is simply the payment details results.

Now that you have payment configured, you might want to capture payment results and customize the button for a better payment experience. Below are useful resources for your reference.

Reference - Payment data parameters

List of payments payload fields

The following options can be parsed to the payment button during integration using the data-* attribute e.g data-email="[email protected]". If any of this data is available, it is highly recommended that you provide them so that we can shorten the payment form and provide a better user experience. Customers will not be prompted to provide this information once if already been added.

This schema is also useful for Checkout Link API too.