Payment Button Element
How to add the IntaSend's payment button element to your website.
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 payment link to your customers. IntaSend will handle payment on your behalf and adequately update you on the status.
The choose of the options above entirely depends on how your application is setup and how you would like to handle the payments. To give you an hint on whether to choose the Payment Button or Checkout Link, the following might be handy:
- Do you Javascript and you 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 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.
Parameter | Description |
---|---|
currency | Recommended: Options are USD, KES, GBP, EUR |
amount | Optional. If not defined customers will have the option to specify how much they want to pay |
phone_number | Optional. Customers will be prompted if required e.g M-Pesa payment |
Optional. Customers will be prompted if required e.g card payments | |
api_ref | Recommended - Tracking reference for own use. |
comment | Optional customer comment if any |
first_name | Optional customer first name |
last_name | Optional customer last name |
country | Optional country code e.g US, BR, KE, etc |
address | Optional user billing address |
city | Optional user billing city |
state | Optional user billing state |
zipcode | Optional user billing zipcode |
method | Optional - if specified only the method will be used. Options are M-PESA, CARD-PAYMENT. Leave blank to show all payment methods. |
card_tarrif | options are BUSINESS-PAYS and CUSTOMER-PAYS . Specify who pays the card charges. Set to BUSINESS-PAYS by default |
mobile_tarrif | options are BUSINESS-PAYS and CUSTOMER-PAYS . Specify who pays the mobile charges. Set to BUSINESS-PAYS by default |
redirect_url | Optional URL where we should redirect the user on payment success |
Updated 2 months ago