WebSdk plugin for IntaSend Payments Button. IntaSend enables you to easily add payments to your website with a few lines of code.

Follow the instruction below to install and get started.

Visit our sandbox/developers test for your publishable API. More information is available on the IntaSend Documentation.

yarn add intasend-inlinejs-sdk

• https://unpkg.com/intasend-inlinejs-sdk@4.0.0/build/intasend-inline.js

Define the container where you want the payment component to appear

<div id="checkoutElement" style="padding: 40;width: 400px; height: 100vh; background: #cacaca; overflow-y: auto;"></div>

Instantiate the checkout element. Include this before closing your body tag

<script type="text/javascript" src="https://unpkg.com/intasend-inlinejs-sdk@4.0.0/build/intasend-inline.js"></script>
<script>
    function openInlineCheckout() {
            const intasendObj = window.IntaSend({
                publicAPIKey: "ISPubKey_test_91ffc81a-8ac4-419e-8008-7091caa8d73f",
                redirectURL: "http://intasend.com",
                live: false,
                mode: "inline",
                inlineContainer: "checkoutElement"
            })
            .on("COMPLETE", () => alert("COMPLETE"))
            .on("FAILED", () => alert("FAILED"))
            .on("IN-PROGRESS", () => console.log("INPROGRESS ..."))

            intasendObj.run({
                amount: 10,
                currency: "USD",
                api_ref: "123",
                email: "felix-inline@intasend.com"
            })
    }
    openInlineCheckout()
</script>

<button class="intaSendPayButton" data-api_ref="payment-link" data-phone-number="254xxxxxxxx"
    data-email="example@intasend.com" data-amount="100">
    Pay Now
</button>

Include this before closing your body tag

<script src="https://unpkg.com/intasend-inlinejs-sdk@4.0.0/build/intasend-inline.js"></script>
<script>
    let isObj = new window.IntaSend({
        publicAPIKey: "<YOUR-API-KEY>",
        redirectURL: "<YOUR-REDIRECT-URL>",
        live: true //or false for sandbox environment
    })
    .on("COMPLETE", (response) => { console.log("COMPLETE:", response) })
    .on("FAILED", (response) => { console.log("FAILED", response) })
    .on("IN-PROGRESS", () => { console.log("INPROGRESS ...") })
</script>