Using a custom button
Customize the customer payment experience using a custom button.
How to add and trigger payment on a custom element
The standard button approach is the simplest way to start collecting payment on your website. Sometimes you might want to parse more items and this might not be possible through the data-* attribute. IntaSend inline web sdk has a
.run() method where you can pass extra parameters and initialize the payment popup.1. Install Inline Web SDK
Include IntaSend plugin before closing your
</head> tag.1
<script src="https://unpkg.com/[email protected]/build/intasend-inline.js"></script>
Copied!
2. Add your custom button
Note, unlike the standard button, the custom button does not require you to provide
data-* attributes and IntaSend class identifier. For the sake of demonstration, we are using an ID attribute that we'll use to trigger the onclick event in the next code block.1
<button id="customBtn">Pay USD 10</button>
Copied!
3. Initialize IntaSend instance
Add your publishable public key and set the enviroonment.
1
let customBtnObj = new window.IntaSend({
2
publicAPIKey: "<--REPLACE-WITH-YOUR-PUBLISHABLE-KEY-->",
3
live: false // set to true when going live
4
})
Copied!
4. Show payment screen on button click
Finally start payment process using the
.run({...}) method. Set the required payment options as per your need. Here is a full list of options you can pass to the .run({...}) method.1
document.getElementById("customBtn").onclick = () => {
2
customBtnObj.run({
3
amount: 10,
4
currency: "USD",
5
email: "[email protected]",
6
first_name: "John",
7
last_name: "Doe",
8
country: "US"
9
})
10
.on("COMPLETE", (results) => console.log("Do something on success", results))
11
.on("FAILED", (results) => console.log("Do something on failure", results))
12
.on("IN-PROGRESS", (results) => console.log("Payment in progress status"))
13
}
Copied!
Finally, capture payment results and do something on success and failure.
Last modified 1mo ago