I am working on a project, which is payment method, similar to stripe, paystack ...etc
The only issue I am facing, is I don't know how to build the javascript SDK as iframe, I am familiar with Javascript in general but never built sdk, I saw some articles but its building Javascript libraries, I can't find any resources on how to to iframe sdk
these are example of what I am trying to build:
https://flutterwave.com/pay/msrifgxcg https://paystack.com/pay/ylxhitmjc3
when you click pay (enter any data) you will find the popup as iframe and you pass some parameters
No problem for me to build on reactjs or vue but the main concept is new to me and till this moment, I can't find anything related that can help me
What you're talking about is building the project's source into a servable bundle, not the JS SDK. In JavaScript, the way (modern) JS apps work is that you have a bundler, usually webpack, take all of your source code and compile it, transpile it and do whatever other transforms you tell it to do. It'll output the built files which are optimized for usage by clients into a dist/ directory, which you can then host in whatever way you prefer. These days, it's common to use a service like Netlify or Vercel to host webapps.
How to build the app entirely depends on how you've set your app up.
For how to build a Vue app, I recommend checking out their docs. Vue's Deployment Guide, and Vue CLI's deployment guide specifically.
For how to build a React app, I recommend checking out their docs as well. create-react-app's Docs, or React's docs.
Once your app is built and hosted somewhere, you can easily just call it in an iframe wherever you need it.