I have built an NPM package called atlas-pay-sdk which is essentially a checkout gateway for a fintech. I was able to use this package with no issues in a React app by doing the normal import AtlasPay from atlas-pay-sdk.
Now, I'm building a Magento plugin that needs to utilize this package via a tag and unpkg, but I'm unable to access the main function AtlasPay. So I created an HTML file and tried calling unpkg this way:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async type="module" src="https://unpkg.com/[email protected]/bundles/index.umd.js"></script>
</head>
<body>
<script>
const atlasPay = AtlasPaySdk.AtlasPay;
atlasPay.init({trxRef: 'your_trxRef'});
</script>
<button onclick="atlasPay.init()" class="test_btn">Init Payment</button>
</body>
</html>
Unfortunately, this doesn't work. When I try accessing it via the window object in the browser console, I only see AtlasPaySdk, which is the package name, and it always returns AtlasPaySdk = {}. Can someone please help me understand what I might be doing wrong?
I have also converted the package itself from functional to class based and again tried initializing it this way const atlasPay = new AtlasPaySdk() but still got the same issue
here is a link to the npm package itself incase someone is willing to give a try to this issue: Atlas Pay SDK