Tonder SDK

Tonder SDK helps to integrate the services Tonder offers in your own website

Installation

You can install using NPM

npm i tonder-sdk-test

Usage

HTML

<div>
    <h1>Checkout</h1>
    <!-- You have to add an entry point with the ID 'tonder-checkout' -->
    <div id="tonder-checkout">
    </div>
</div>

Javascript

import { Checkout } from 'tonder-sdk-test';

// Initialize the checkout
const config = {
    apiKey: "businessAPIKey",
    type: "payment",
};
const tonderCheckout = new TonderCheckout(config);

// Update the payment value 
const paymentOptions = {
    email: "[email protected]"
    products: [
        {
            name:"Product 1",
            price_unit: "399.99",
            image:"https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
            quantity: "1",
            description: "Test",
            
        },
        {
            name:"Product 2",
            price_unit:"599.99",
        },
    ]
    shippingCost:"150",
}
tonderCheckout.setPayment(paymentOptions)

// Mount the button in the entry point
const buttonOptions = {
    buttonText: 'Proceed to payment'
}

tonderCheckout.mountButton(buttonOptions)

##React Example

import React, { useState, useLayoutEffect, useContext, useEffect } from 'react'
import { Checkout as TonderCheckout } from 'tonder-sdk-test'

import { CartContext } from '../context/CartContext'


export const Checkout = () => {
    const cart = useContext(CartContext)

    const [checkoutResponse, setCheckoutResponse] = useState({})
    const receiveResponse = (data) => {
        setCheckoutResponse(data)
    }
    const config = {
        apiKey: "Your Tonder API Key",
        type: "payment",
        cb: receiveResponse,
    }
    const tonderCheckout = new TonderCheckout(config)
    const params = {
        shippingCost: cart.shippingCost,
        email: "[email protected]"
    }
    tonderCheckout.setOrder(params)

    useEffect(()=>{
        function setOrder() {
            const _tonderCart = cart.items.map(product => {
                return {
                    name: product.title,
                    price_unit: product.price,
                    quantity: product.quantity
                }
            })
            tonderCheckout.setOrder({products: _tonderCart})
        }
        setOrder()
    }, [cart.items])

    useLayoutEffect(() => {
        tonderCheckout.mountButton({ buttonText: 'Proceder al pago' })
    })

    return (
        <div>
            <h1>Checkout</h1>
            <div id="tonder-checkout">
            </div>
            <p>{checkoutResponse?.data?.status}</p>
        </div>
    )
}

Configuration

| Property | Type | Description | |:---------------:|:-------------:|:---------------------------------------------------:| | apiKey | string | You can take this from you Tonder Dashboard | | type | string | values: 'payment', 'lite', 'full' | | backgroundColor | string | Hex color #000000 | | color | string | Hex color #000000 | | cb | function | Function executed when checkout send a response |

setPayment params

products

It will receive an array of objects that represent the products.

[
    {
        name: 'name of the product',
        price_unit: 'price of the product',
        image: 'url to the image to be used'
    }
]

shippingCost

It is a valid float string, that will be the shipping cost.

email

The email of the customer that is making the purchase.

License

MIT