Socket
Socket
Sign inDemoInstall

@transak/transak-sdk

Package Overview
Dependencies
53
Maintainers
3
Versions
52
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.3 to 1.3.0

84

dist/sdk.js

@@ -1078,3 +1078,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.TransakSDK = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){

"name": "@transak/transak-sdk",
"version": "1.2.2",
"version": "1.3.0",
"description": "Transak SDK that allows you to easily integrate the fiat on/ramp",

@@ -1388,6 +1388,6 @@ "main": "dist/sdk.js",

var _queryString = _interopRequireDefault(require("query-string"));
var _constants = require("./constants");
var _generalUtil = require("./utils/generalUtil");
var _svg = require("./assets/svg");

@@ -1397,4 +1397,2 @@

var _queryString = _interopRequireDefault(require("query-string"));
var _package = require("../package.json");

@@ -1431,7 +1429,7 @@

TransakSDK.prototype.close = async function () {
let modal = document.getElementById("transakFiatOnOffRamp");
let modal = document.getElementById('transakFiatOnOffRamp');
if (modal && modal.style) {
modal.style.display = "none";
modal.innerHTML = "";
modal.style.display = 'none';
modal.innerHTML = '';
await modal.remove();

@@ -1461,15 +1459,15 @@ }

let wrapper = document.createElement('div');
wrapper.id = "transakFiatOnOffRamp";
wrapper.innerHTML = `<div class="transak_modal-overlay" id="transak_modal-overlay"></div><div class="transak_modal" id="transak_modal"><div class="transak_modal-content"><span class="transak_close">${_svg.closeSVGIcon}</span><div class="transakContainer"><iframe id="transakOnOffRampWidget" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer" allowFullScreen src="${url}" style="width: ${width}; height: ${height}"></iframe></div></div></div>`;
let container = document.getElementsByTagName("body");
if (!container) container = document.getElementsByTagName("html");
if (!container) container = document.getElementsByTagName("div");
wrapper.id = 'transakFiatOnOffRamp';
wrapper.innerHTML = `<div class="transak_modal-overlay" id="transak_modal-overlay"></div><div class="transak_modal" id="transak_modal"><div class="transak_modal-content"><span class="transak_close">${_svg.closeSVGIcon}</span><div class="transakContainer"><iframe id="transakOnOffRampWidget" allow="camera;microphone;fullscreen;payment" allowFullScreen src="${url}" style="width: ${width}; height: ${height}"></iframe></div></div></div>`;
let container = document.getElementsByTagName('body');
if (!container) container = document.getElementsByTagName('html');
if (!container) container = document.getElementsByTagName('div');
await container[0].appendChild(wrapper);
await setStyle(this.partnerData.themeColor, width, height);
let modal = document.getElementById("transakFiatOnOffRamp");
let span = document.getElementsByClassName("transak_close")[0]; //Prevent background scrolling when overlay appears
let modal = document.getElementById('transakFiatOnOffRamp');
let span = document.getElementsByClassName('transak_close')[0]; //Prevent background scrolling when overlay appears
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
if (modal && modal.style) modal.style.display = "block";
document.body.scroll = 'no';
if (modal && modal.style) modal.style.display = 'block';
this.isInitialised = true;

@@ -1487,6 +1485,6 @@ eventEmitter.emit(_constants.EVENTS.TRANSAK_WIDGET_INITIALISED, {

window.onclick = event => {
if (event.target === document.getElementById("transak_modal-overlay")) this.closeRequest();
if (event.target === document.getElementById('transak_modal-overlay')) this.closeRequest();
};
if (window.addEventListener) window.addEventListener("message", handleMessage);else window.attachEvent("onmessage", handleMessage);
if (window.addEventListener) window.addEventListener('message', handleMessage);else window.attachEvent('onmessage', handleMessage);
}

@@ -1501,5 +1499,5 @@ } catch (e) {

environment = 'development',
queryString = "",
width = "100%",
height = "100%";
queryString = '',
width = '100%',
height = '100%';

@@ -1544,3 +1542,3 @@ if (configData) {

style.innerHTML = (0, _css.getCSS)(themeColor, height, width);
let modal = document.getElementById("transakFiatOnOffRamp");
let modal = document.getElementById('transakFiatOnOffRamp');
if (modal) await modal.appendChild(style);

@@ -1564,8 +1562,8 @@ }

document.documentElement.style.overflow = 'scroll';
document.body.scroll = "yes";
let modal = document.getElementById("transakFiatOnOffRamp");
document.body.scroll = 'yes';
let modal = document.getElementById('transakFiatOnOffRamp');
if (modal && modal.style) {
modal.style.display = "none";
modal.innerHTML = "";
modal.style.display = 'none';
modal.innerHTML = '';
modal.remove();

@@ -1632,33 +1630,3 @@ }

},{"../package.json":7,"./assets/css":8,"./assets/svg":9,"./constants":13,"./utils/generalUtil":15,"events":1,"query-string":4}],15:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
},{"../package.json":7,"./assets/css":8,"./assets/svg":9,"./constants":13,"events":1,"query-string":4}]},{},[14])(14)
});
exports.UrlEncode = UrlEncode;
exports.default = void 0;
function UrlEncode(data, encodeornot) {
if (typeof data == 'object') {
let out = [];
for (let key in data) {
out.push(key + '=' + (encodeornot ? encodeURIComponent(data[key]) : data[key]));
}
let finalStr = out.join('&');
return finalStr;
} else {
console.warn('error occur');
}
}
;
var _default = {
UrlEncode
};
exports.default = _default;
},{}]},{},[14])(14)
});

2

package.json
{
"name": "@transak/transak-sdk",
"version": "1.2.3",
"version": "1.3.0",
"description": "Transak SDK that allows you to easily integrate the fiat on/ramp",

@@ -5,0 +5,0 @@ "main": "dist/sdk.js",

37

README.md

@@ -5,8 +5,4 @@ # Transak SDK

### Installation
## Installation
To use the Transak widget with your javascript application, you will need to
use `[@transak/transak-sdk](https://www.npmjs.com/package/@transak/transak-sdk)` (Transak’s JavaScript SDK). Add the
Transak SDK as a dependency using `yarn` or `npm`:
```sh

@@ -20,19 +16,14 @@ # Using yarn

For the advance customization, view
our [query parameter documentation.](https://docs.transak.com/docs/query-parameters)
## Example usage
### Example usage
Refer here for the full list of [customisation options](https://docs.transak.com/docs/query-parameters)
```sh
import transakSDK from '@transak/transak-sdk'
```js
import transakSDK from '@transak/transak-sdk';
let transak = new transakSDK({
apiKey: '4fcd6904-706b-4aff-bd9d-77422813bbb7', // Your API Key (Required)
environment: 'STAGING', // STAGING/PRODUCTION (Required)
walletAddress: '', // Your customer wallet address
themeColor: '000000', // App theme color in hex
email: '', // Your customer email address (Optional)
redirectURL: '',
widgetHeight: '550px',
widgetWidth: '450px'
apiKey: '<your-api-key>', // (Required)
environment: '<environment: STAGING/PRODUCTION>', // (Required)
// .....
// For the full list of customisation options check the link above
});

@@ -44,3 +35,3 @@

transak.on(transak.ALL_EVENTS, (data) => {
console.log(data)
console.log(data);
});

@@ -50,9 +41,9 @@

transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (orderData) => {
transak.close();
transak.close();
});
// This will trigger when the user marks payment is made.
// This will trigger when the user marks payment is made
transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
console.log(orderData);
transak.close();
console.log(orderData);
transak.close();
});

@@ -59,0 +50,0 @@ ```

317

src/index.js
import events from 'events';
import { config, errorsLang, EVENTS } from "./constants";
import { UrlEncode } from "./utils/generalUtil";
import queryStringLib from 'query-string';
import { config, errorsLang, EVENTS } from './constants';
import { closeSVGIcon } from './assets/svg';
import { getCSS } from './assets/css';
import queryStringLib from 'query-string'
import { version } from "../package.json"
import { version } from '../package.json';

@@ -12,182 +11,180 @@ const eventEmitter = new events.EventEmitter();

function TransakSDK(partnerData) {
this.sdkVersion = version;
this.partnerData = partnerData;
this.isInitialised = false;
this.EVENTS = EVENTS;
this.ALL_EVENTS = '*';
this.ERROR = 'TRANSAK_ERROR'
this.sdkVersion = version;
this.partnerData = partnerData;
this.isInitialised = false;
this.EVENTS = EVENTS;
this.ALL_EVENTS = '*';
this.ERROR = 'TRANSAK_ERROR';
}
TransakSDK.prototype.on = function (type, cb) {
if (type === this.ALL_EVENTS) {
for (let eventName in EVENTS) {
eventEmitter.on(EVENTS[eventName], cb);
}
if (type === this.ALL_EVENTS) {
for (let eventName in EVENTS) {
eventEmitter.on(EVENTS[eventName], cb);
}
if (EVENTS[type]) eventEmitter.on(type, cb);
if (type === this.ERROR) eventEmitter.on(this.ERROR, cb);
}
}
if (EVENTS[type]) eventEmitter.on(type, cb);
if (type === this.ERROR) eventEmitter.on(this.ERROR, cb);
};
TransakSDK.prototype.init = function () {
this.modal(this);
}
this.modal(this);
};
TransakSDK.prototype.close = async function () {
let modal = document.getElementById("transakFiatOnOffRamp");
if (modal && modal.style) {
modal.style.display = "none";
modal.innerHTML = "";
await modal.remove();
}
}
let modal = document.getElementById('transakFiatOnOffRamp');
if (modal && modal.style) {
modal.style.display = 'none';
modal.innerHTML = '';
await modal.remove();
}
};
TransakSDK.prototype.closeRequest = function () {
let iframeEl = document.getElementById('transakOnOffRampWidget');
if (iframeEl) iframeEl.contentWindow.postMessage({
event_id: EVENTS.TRANSAK_WIDGET_CLOSE_REQUEST,
data: true
}, '*');
}
let iframeEl = document.getElementById('transakOnOffRampWidget');
if (iframeEl) iframeEl.contentWindow.postMessage({
event_id: EVENTS.TRANSAK_WIDGET_CLOSE_REQUEST,
data: true
}, '*');
};
TransakSDK.prototype.modal = async function () {
try {
if (this.partnerData) {
let { url, width, height, partnerData } = await generateURL({ ...this.partnerData, sdkVersion: this.sdkVersion });
let wrapper = document.createElement('div');
wrapper.id = "transakFiatOnOffRamp";
wrapper.innerHTML = `<div class="transak_modal-overlay" id="transak_modal-overlay"></div><div class="transak_modal" id="transak_modal"><div class="transak_modal-content"><span class="transak_close">${closeSVGIcon}</span><div class="transakContainer"><iframe id="transakOnOffRampWidget" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer" allowFullScreen src="${url}" style="width: ${width}; height: ${height}"></iframe></div></div></div>`;
let container = document.getElementsByTagName("body");
if (!container) container = document.getElementsByTagName("html");
if (!container) container = document.getElementsByTagName("div");
await container[0].appendChild(wrapper);
await setStyle(this.partnerData.themeColor, width, height);
let modal = document.getElementById("transakFiatOnOffRamp");
let span = document.getElementsByClassName("transak_close")[0];
try {
if (this.partnerData) {
let { url, width, height, partnerData } = await generateURL({ ...this.partnerData, sdkVersion: this.sdkVersion });
let wrapper = document.createElement('div');
wrapper.id = 'transakFiatOnOffRamp';
wrapper.innerHTML = `<div class="transak_modal-overlay" id="transak_modal-overlay"></div><div class="transak_modal" id="transak_modal"><div class="transak_modal-content"><span class="transak_close">${closeSVGIcon}</span><div class="transakContainer"><iframe id="transakOnOffRampWidget" allow="camera;microphone;fullscreen;payment" allowFullScreen src="${url}" style="width: ${width}; height: ${height}"></iframe></div></div></div>`;
let container = document.getElementsByTagName('body');
if (!container) container = document.getElementsByTagName('html');
if (!container) container = document.getElementsByTagName('div');
await container[0].appendChild(wrapper);
await setStyle(this.partnerData.themeColor, width, height);
let modal = document.getElementById('transakFiatOnOffRamp');
let span = document.getElementsByClassName('transak_close')[0];
//Prevent background scrolling when overlay appears
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
//Prevent background scrolling when overlay appears
document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';
if (modal && modal.style) modal.style.display = "block";
this.isInitialised = true;
eventEmitter.emit(EVENTS.TRANSAK_WIDGET_INITIALISED, {
status: true,
eventName: EVENTS.TRANSAK_WIDGET_INITIALISED
});
// When the user clicks on <span> (x), close the modal
span.onclick = () => {
return this.closeRequest()
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = (event) => {
if (event.target === document.getElementById("transak_modal-overlay")) this.closeRequest()
}
if (window.addEventListener) window.addEventListener("message", handleMessage);
else window.attachEvent("onmessage", handleMessage);
}
} catch (e) {
throw (e)
if (modal && modal.style) modal.style.display = 'block';
this.isInitialised = true;
eventEmitter.emit(EVENTS.TRANSAK_WIDGET_INITIALISED, {
status: true,
eventName: EVENTS.TRANSAK_WIDGET_INITIALISED
});
// When the user clicks on <span> (x), close the modal
span.onclick = () => {
return this.closeRequest()
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = (event) => {
if (event.target === document.getElementById('transak_modal-overlay')) this.closeRequest()
}
if (window.addEventListener) window.addEventListener('message', handleMessage);
else window.attachEvent('onmessage', handleMessage);
}
}
} catch (e) {
throw (e)
}
};
async function generateURL(configData) {
let partnerData = {}, environment = 'development', queryString = "", width = "100%", height = "100%";
if (configData) {
configData.hostURL = window.location.origin;
if (configData.apiKey) {
if (configData.environment) {
if (config.ENVIRONMENT[configData.environment]) environment = config.ENVIRONMENT[configData.environment].NAME
}
try {
environment = environment.toUpperCase();
Object.keys(configData).map((key) => {
if (configData[key] instanceof Object) {
partnerData[key] = JSON.stringify(configData[key]);
} else partnerData[key] = configData[key];
});
queryString = queryStringLib.stringify(partnerData, { arrayFormat: 'comma' });
} catch (e) {
throw (e)
}
}
else throw (errorsLang.ENTER_API_KEY);
if (configData.widgetWidth) width = configData.widgetWidth;
if (configData.widgetHeight) height = configData.widgetHeight;
}
return { width, height, partnerData, url: `${config.ENVIRONMENT[environment].FRONTEND}?${queryString}` }
let partnerData = {}, environment = 'development', queryString = '', width = '100%', height = '100%';
if (configData) {
configData.hostURL = window.location.origin;
if (configData.apiKey) {
if (configData.environment) {
if (config.ENVIRONMENT[configData.environment]) environment = config.ENVIRONMENT[configData.environment].NAME
}
try {
environment = environment.toUpperCase();
Object.keys(configData).map((key) => {
if (configData[key] instanceof Object) {
partnerData[key] = JSON.stringify(configData[key]);
} else partnerData[key] = configData[key];
});
queryString = queryStringLib.stringify(partnerData, { arrayFormat: 'comma' });
} catch (e) {
throw (e)
}
} else throw (errorsLang.ENTER_API_KEY);
if (configData.widgetWidth) width = configData.widgetWidth;
if (configData.widgetHeight) height = configData.widgetHeight;
}
return { width, height, partnerData, url: `${config.ENVIRONMENT[environment].FRONTEND}?${queryString}` }
}
async function setStyle(themeColor, width, height) {
let style = await document.createElement('style');
style.innerHTML = getCSS(themeColor, height, width);
let modal = document.getElementById("transakFiatOnOffRamp");
if (modal) await modal.appendChild(style);
let style = await document.createElement('style');
style.innerHTML = getCSS(themeColor, height, width);
let modal = document.getElementById('transakFiatOnOffRamp');
if (modal) await modal.appendChild(style);
}
function handleMessage(event) {
let environment;
if (event.origin === config.ENVIRONMENT.LOCAL_DEVELOPMENT.FRONTEND) environment = config.ENVIRONMENT.LOCAL_DEVELOPMENT.NAME;
else if (event.origin === config.ENVIRONMENT.PRODUCTION.FRONTEND) environment = config.ENVIRONMENT.PRODUCTION.NAME;
else if (event.origin === config.ENVIRONMENT.STAGING.FRONTEND) environment = config.ENVIRONMENT.STAGING.NAME;
let environment;
if (event.origin === config.ENVIRONMENT.LOCAL_DEVELOPMENT.FRONTEND) environment = config.ENVIRONMENT.LOCAL_DEVELOPMENT.NAME;
else if (event.origin === config.ENVIRONMENT.PRODUCTION.FRONTEND) environment = config.ENVIRONMENT.PRODUCTION.NAME;
else if (event.origin === config.ENVIRONMENT.STAGING.FRONTEND) environment = config.ENVIRONMENT.STAGING.NAME;
if (environment) {
if (event && event.data && event.data.event_id) {
switch (event.data.event_id) {
case EVENTS.TRANSAK_WIDGET_CLOSE: {
eventEmitter.emit(EVENTS.TRANSAK_WIDGET_CLOSE, {
status: true,
eventName: EVENTS.TRANSAK_WIDGET_CLOSE
});
if (environment) {
if (event && event.data && event.data.event_id) {
switch (event.data.event_id) {
case EVENTS.TRANSAK_WIDGET_CLOSE: {
eventEmitter.emit(EVENTS.TRANSAK_WIDGET_CLOSE, {
status: true,
eventName: EVENTS.TRANSAK_WIDGET_CLOSE
});
//enable background scrolling when overlay appears
document.documentElement.style.overflow = 'scroll';
document.body.scroll = "yes";
let modal = document.getElementById("transakFiatOnOffRamp");
if (modal && modal.style) {
modal.style.display = "none";
modal.innerHTML = "";
modal.remove();
}
break;
}
case EVENTS.TRANSAK_ORDER_CREATED: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_CREATED, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_CREATED
});
break;
}
case EVENTS.TRANSAK_ORDER_CANCELLED: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_CANCELLED, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_CANCELLED
});
break;
}
case EVENTS.TRANSAK_ORDER_FAILED: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_FAILED, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_FAILED
});
break;
}
case EVENTS.TRANSAK_ORDER_SUCCESSFUL: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_SUCCESSFUL, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_SUCCESSFUL
});
break;
}
case EVENTS.TRANSAK_WIDGET_OPEN: {
eventEmitter.emit(EVENTS.TRANSAK_WIDGET_OPEN, {
status: true,
eventName: EVENTS.TRANSAK_WIDGET_OPEN
});
break;
}
default: {
}
}
//enable background scrolling when overlay appears
document.documentElement.style.overflow = 'scroll';
document.body.scroll = 'yes';
let modal = document.getElementById('transakFiatOnOffRamp');
if (modal && modal.style) {
modal.style.display = 'none';
modal.innerHTML = '';
modal.remove();
}
break;
}
case EVENTS.TRANSAK_ORDER_CREATED: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_CREATED, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_CREATED
});
break;
}
case EVENTS.TRANSAK_ORDER_CANCELLED: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_CANCELLED, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_CANCELLED
});
break;
}
case EVENTS.TRANSAK_ORDER_FAILED: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_FAILED, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_FAILED
});
break;
}
case EVENTS.TRANSAK_ORDER_SUCCESSFUL: {
eventEmitter.emit(EVENTS.TRANSAK_ORDER_SUCCESSFUL, {
status: event.data.data,
eventName: EVENTS.TRANSAK_ORDER_SUCCESSFUL
});
break;
}
case EVENTS.TRANSAK_WIDGET_OPEN: {
eventEmitter.emit(EVENTS.TRANSAK_WIDGET_OPEN, {
status: true,
eventName: EVENTS.TRANSAK_WIDGET_OPEN
});
break;
}
default: {
}
}
}
}
}
export default TransakSDK
export default TransakSDK;
src/example/index.js
src/utils/apiUtil.js
src/utils/generalUtil.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc