I know it’s not the same API but perhaps @patoptChargebee tutorial might be a good example to follow to understand how these payment flows work
you might need to develop a custom component to ensure your secret keys are secure. In that case, it might be worth hiring someone like @dorilama to help you
if it’s something you want to learn about, @raydeck might be able to help you work through it during one of his StateChange Office Hours
we can also try to work it out all together in this thread! If you’d like to do that, it would be helpful to share a short video and/or screenshots showing us what you tried to do (just make sure you blur out any secret/private API key you might have in there)
I just want to add that while weweb’s plugins have a way to store secure data on weweb’s server, it’s not clear if the same feature is available to custom components.
The main reason you want to create a custom component is to drastically speed up your development time with an added feature that you need in your app. A lot of things can be added using javascript actions and the html element, but if you need to set this up multiple times it can quickly add up and increase the possibility of introducing small bugs. In this case custom component will just do all the necessary stuff automatically for you and will expose a nice editor interface to interact with. It becomes as easy as drag and dropping the element in the editor.
Working with my backend developer, we used the HTML element and he wrote this javascript. We do have a collection that is called to fetch a token value. That results in a link that opens in a new tab on the authorize.net site. From there, the user enters their own payment information on authorize’s site. Not the best from a brand perspective, but for a fast MVP it got this part functional.