Javascript SDK

the javascript sdk offered by tamio acts as an efficient wrapper for the tamio transactions api its purpose is to provide a streamlined yet flexible approach to incorporating billing and payment capturing functionalities within any project by leveraging the javascript sdk, you have the power to create transactions, gather sensitive payment details, and accept payments in any currency supported by our platform these functionalities are supported by all of our partnered payment providers, thus ensuring a wide range of options for your customers and reducing friction in the payment process importantly, even if you are creating transactions outside of the javascript sdk by directly calling the transactions api, the sdk can still play a crucial role in your processes it can be employed for payment rendering, adding another layer of flexibility to your operations this allows you to benefit from the features of the sdk while maintaining direct interaction with the transactions api for specific use cases, providing a balance of convenience and control getting started step 1 load the skd on your page // production // beta step 2 initialise the sdk with your publishable developer token you can create a token in the developers' section in your tamio dashboard var tamio = new tamio('your publishable token here'); create transaction to create a transaction, call the createtransaction(options = {}) method with the required parameters, such as product id and customer information if the response is successful, it will return a transaction object var params = { products \[ { id 'some product id', quantity 6 }, // tamio product { name 'my product', price 10 } // custom invoice item ], new customer { name 'mike doe', email 'mikedoe\@tamio com', country 'de' } } tamio createtransaction(params) then((resp) => { if (resp status === 200) { // do something with resp transaction } else { console log(resp error); } }); all the available options for the createtransaction method can be found at the create transaction docid 48lszuip3ogpyzjjguxhe endpoint finalise transaction once the customer is ready to complete their order, call the method finalisetransaction(transaction id, options = {}, container id, styles = {}) by default, the first available payment willl be used when rendering you can also choose which payment gateway you would like to use the available payments for a transaction are provided in the response when you create transaction docid 48lszuip3ogpyzjjguxhe tamio finalisetransaction( 'some transaction uuid', { payment 'revolut' }, 'my div' ); example with an instalment plan the available instalment plans and their ids are provided in the response when you create transaction docid 48lszuip3ogpyzjjguxhe tamio finalisetransaction( 'some transaction uuid', { payment 'instalments', plan 'plan uuid' }, 'my div' ); depending on the payment method, the transaction will either finalise automatically or display a call to action so that the customer can complete their order due to the nature of online payments, no callback can be provided and that's it! once the customer makes the payment and we receive confirmation, the post payment flow will be triggered full options tamio finalisetransaction( // transaction id 'some transaction uuid', // options { payment 'instalments', plan 'plan uuid', // if you like the update the shipping method of the order shipping 'some shipping uuid', // where to redirect upon order confirmation redirect 'https //tamio com' }, // container id 'my div', // styles // colors can be in hex format or one of the named options below // "aqua", "black", "blue", "fuchsia", "gray", "green", "lime" // "navy", "olive", "orange", "purple", "red", "silver", "teal" // "maroon", "white", "yellow" { buttoncolor '#ffffff', buttonbordercolor '#ffffff', buttontextcolor 'blue', buttonborderradius '16px', // 0px 100px // applies to all input forms such as credit card number fields inputbordercolor '#ffffff', // applies to labels, spans and paragraphs labelcolor '#ffffff', labelbordercolor '#ffffff' } ); styles are css rules that get applied to the buttons, credit cards fields and radio fields rendered by third party payment gateways note that styles you provide might not always apply, as some payment providers such as revolut pay and google pay, do not allow modifications of their dom elements transaction updates a a lpha lpha when the customer switches between payment gateways, the total of the order might change some of the factors that might cause the total to change are a) payment specific discounts and b) payment specific taxes you can listen to the transactionupdated event in order to receive updates tamio addeventlistener('transactionupdated', (e) => { console log('transaction object ', e detail); }, false); redirects a a lpha lpha redirecting a customer to a thank you page during a checkout process is a tricky task, due to the differences in the flows of each payment processor if you like the sdk to take care of this process, you can pass a url to use as a redirect when finalising a transaction when the customer is redirected, you will also receive the following information as query parameters transaction id the id of the transaction item total the total cost of the items in the order item count the total number of items purchased total the order total customer id the id of the customer if you like to receive more information about the order during the redirect, get in touch with our team warning if your thank you page flow requires the payment to be confirmed, do not use this feature the redirect option is indented for order confirmation purposes only estimate transaction a a lpha lpha if you like to estimate the cost of an order before generating a transaction or see which payment options will be available for a prospective customer, you can use the estimatetransaction(options = {}) method the response provided is a complete transaction object docid 0es5bvicbfmv7ocgcamez for the available options see var params = { products \[ { id 'some product id', quantity 6 }, // tamio product { name 'my product', price 10 } // custom invoice item ], new customer { country 'de' } } tamio estimatetransaction(params) then((resp) => { if (resp status === 200) { // do something with resp transaction } else { console log(resp errors\[0]); } }); coupon validation in some cases, you might want to check if a coupon is valid before creating a transaction for this use case, you can use the validatecoupons method tamio validatecoupons({ coupons \['20%off'], 'products' \['some product id'], 'currency' 'eur' }) then((resp) => { if (resp status === 200) { // do something with resp coupons } else { console log(resp error); } }); example response "coupons" \[ { "valid" true, "amount off" 0, "percent off" 2 0, "shipping amount off" 0, "shipping percent off" 2 0, "currency" "eur", "coupon" "blcgr1opdo6", "requirements" null } ] whitelabel api requests a a lpha lpha by default the api url used in the sdk is whitelabeled moreover, if you like to ensure a pure whitelabel experience, you can also configure the sdk to send all the api requests to your own whitelabel domain like below var tamio = new tamio('your publishable token here', 'https //api your whitelabel domain host');