I have a payment gateway which is not listed in WIX and my payment gateway provide shared the node JS packages/Java Script files with me. How can I use these files into my website.
If it has been approved by Wix and is in their npm list, then you can use it.
https://support.wix.com/en/article/corvid-working-with-npm-packages
Otherwise you will have to look at using an API if you have one.
You can request an NPM library to be installed .
Thanks @sailorcihan , the link refers to the packages which are already available in WIX package manager either approved/or under consideration. But I want to request altogether a new package.
Below is my code snippet from my payment gateway for my client side coding. If you can help me to convert it into Wix language.
P.S. - I am new to Web Development but I am a mainframe Developer by profession asd trying my hand in web development. Hence I will be thankful to you fo your help to understand the difference in nomenclature between normal node JS and WIX CORVID.
var socket = io();
var payButton = document.getElementById(‘payButton’);
var createTokenButton = document.getElementById(‘createTokenButton’);
var payTokenButton = document.getElementById(‘tokenPayButton’);
var paymentWrapper = document.getElementById(‘payment_frame_wrapper’);
if(payButton) {
payButton.addEventListener(‘click’, function() {
var amount = document.getElementById(‘amount’).value;
socket.emit(‘startTransaction’, amount);
});
}
if(createTokenButton) {
document.getElementById(‘createTokenButton’).addEventListener(‘click’, function() {
socket.emit(‘createToken’);
});
}
if (window.location.href.match(‘/token’)) {
socket.emit(‘get_cards’);
socket.on(‘load_cards’, function(cards) {
for(var x in cards){
addTokenToList(cards[x]);
}
});
}
if(payTokenButton) {
document.getElementById(‘tokenPayButton’).addEventListener(‘click’, function() {
var amount = document.getElementById(‘amount’).value;
var token = document.getElementById(‘token’).value;
socket.emit(‘billToken’, token, amount);
});
}
socket.on(‘transaction_url’, function (url) {
createPaymentFrame(paymentWrapper, url, onFrameLoaded);
});
socket.on(‘tokenisation_url’, function(url) {
createPaymentFrame(paymentWrapper, url, onFrameLoaded);
});
socket.on(‘txn_complete’, function(txn) {
var paymentFrame = paymentWrapper.firstElementChild;
closePaymentFrame(paymentFrame);
document.getElementById(‘flash_message’).innerHTML = txn.errorMessage;
});
socket.on(‘token_txn_complete’, function(txn) {
console.log(txn.errorMessage);
document.getElementById(‘flash_message’).innerHTML = txn.errorMessage;
});
socket.on(‘token_complete’, function(token) {
document.getElementById(‘flash_message’).innerHTML = token;
addTokenToList(token);
var paymentFrame = paymentWrapper.firstElementChild;
closePaymentFrame(paymentFrame);
});
socket.on(‘token_deleted’, function(token) {
var token = document.getElementById(token);
token.parentElement.removeChild(token);
});
socket.on(‘error_message’, function(err) {
document.getElementById(‘flash_message’).innerHTML = err;
});
function addTokenToList(card) {
var li = document.createElement(“li”);
li.id = card.token;
var token = document.createTextNode(card.token);
var btn = document.createElement(“button”);
var deleteBtn = document.createElement(‘button’);
btn.style.margin = “5px”;
deleteBtn.style.margin = “5px”;
var t = document.createTextNode(“select”);
var k = document.createTextNode(“delete”);
deleteBtn.onclick = function() {
socket.emit(‘deleteToken’, card.token);
}
btn.onclick = function() {
document.getElementById(‘token’).value = token.textContent;
}
btn.appendChild(t);
deleteBtn.appendChild(k);
li.appendChild(btn);
li.appendChild(deleteBtn);
li.appendChild(token);
document.getElementById(“card_list”).appendChild(li);
}
function createPaymentFrame(parentElement, paymentURL, onLoad) {
var paymentFrame = document.createElement(‘iframe’);
paymentFrame.src = paymentURL;
paymentFrame.style.minHeight = “475px”;
parentElement.appendChild(paymentFrame);
this.bindFrameLoadEvent(paymentFrame, onLoad);
return paymentFrame;
}
function onFrameLoaded(iframe) {
// Browsers shouldn’t allow access to the content of an iframe unless it is from your own domain.
// So, if we can access the content, then the user has been redirected back to your site from paystation.
if (canAccessIFrame(iframe)) {
// We have redirected back to our own site inside the iframe.
// It is possible to grab some data from inside the frame, but it is better and often quicker to use polling to get this response as that data can be trusted.
closePaymentFrame(iframe);
}
}
// This is used to detect when the frame is redirected. If you are not using redirects then you wont need to use this.
function bindFrameLoadEvent(frame, onLoad) {
if (navigator.userAgent.indexOf(“MSIE”) > -1 && !window.opera) {
frame.addEventListener(‘readystatechange’, function() {
if (frame.readyState == “complete”) {
onLoad(frame);
}
});
}
else {
frame.addEventListener(‘load’, function() {
onLoad(frame);
});
}
}
// Most browsers do not allow manipulating the contents of an iframe if it is in a different domain.
// This can be used to test if the client has been redirected back to your website after making the payment in paystation.
function canAccessIFrame(iframe) {
var html = null;
try {
var doc = iframe.contentDocument || iframe.contentWindow.document;
html = doc.body.innerHTML;
}
catch (err) {}
return (html != null);
}
function closePaymentFrame(paymentFrame) {
if (paymentFrame) {
paymentFrame.parentNode.removeChild(paymentFrame);
paymentFrame = false;
}
}
Same question asked here, so I’ve closed it.
Please suggest how to request a NPM package for wiX package manager?
Unfortunately you won’t be able to simply use that in an html component as I think that is more their own js file.
You can read more about js files here.
https://www.w3schools.com/js/js_whereto.asp
Where this js file - ‘<scriptsrc=“https://www.w3schools.com/js/myScript1.js”>’ - uses a full URL to link to a script:
Or you can use code like this - ‘<scriptsrc=“/js/myScript1.js”>’ - which uses a script located in a specified folder on the current web site
So, in theory the code that you have been given would be used on this js file here and you would then add that js link into the html code that you place in a iFrame on your page or in a custom new tool in Tracking.
You might be best here first of all to contact the third party code provider which can we take is PayStation as they are mentioned in the code above.
// This can be used to test if the client has been redirected back to your website after making the payment in paystation.
Speak to their own support first and see if they have their own html code that you can add to the page or in a custom new tool in Tracking and Analytics.
https://support.wix.com/en/article/wix-editor-using-iframes-to-display-visible-content-on-your-site
https://support.wix.com/en/article/embedding-custom-code-to-your-site
You can pass data between a html component and the page and vice versa if you ever need to like here.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://support.wix.com/en/article/corvid-working-with-the-html-element
Please note as well that on both of those pages about iFrame and Tracking, it does state that Wix will not provide support for code that comes from third parties.
Wix does not provide support for technical difficulties associated with third-party code snippets. If you are experiencing an issue with your code snippet, please contact the provider directly.
Better still and which will be more secure way of working for you, see if they have their own API that you can expose your Wix site to with the use of Wix Fetch or Wix HTTP Functions.
https://www.wix.com/corvid/reference/wix-fetch.html
https://support.wix.com/en/article/corvid-accessing-third-party-services-with-the-fetch-api
https://www.wix.com/corvid/reference/wix-http-functions.html
https://support.wix.com/en/article/corvid-exposing-a-site-api-with-http-functions
Examples.
https://www.wix.com/corvid/example/exposing-apis
https://www.wix.com/corvid/forum/tips-tutorials-examples/example-myapi-and-myapiclient
If you are using PayStation from TradeMe in NZ, then they have their own API which would be a better choice to use.
https://www2.paystation.co.nz/developers/
https://docs.paystation.co.nz/
@givemeawhisky , thanks for the help and suggestion. Paystation has exposed their API for me to use. I am able to initaite the code conversation with paystation now using POST method.
Now, they are sharing a weblink “Paystation Hosted Payments” in the response, which will open a webpage for payment gateway. Please suggest how can I use this link in same session and handle the response back.