I'm not a frontend Vue.js developer and I'll appreciate any pointers. I'd like to prototype an Apple pay button on a page in a collection. When this button is clicked, it'll invoke a JS script and start the sequence of Apple Pay, which will involve several calls to the Node.js BE, a call to Apple pay gateway ... In React, this will be a module. Not sure how this fit into Directus. Is it a custom Interface on a field (amount to pay perhaps)?
#Apple pay button on an item
dim glacier
fallow surge
This sounds like something that I'd be handling on my frontend and not necessarily inside the Directus Data Studio.
dim glacier
Well, nothing wrong to take advantage of Directus, right? I'm think like, have a collection with credit card number as key. It'll have name and other card info. and finally an amount field that will display as a button. User should enter an amount and click on the button to invoke the payment sequence. Or maybe, I'm on the wrong track?
fallow surge
Certainly nothing wrong with using all the tools Directus gives you.
Just asking if that's the right place for it.
What's your specific use case here? Who are you users? And what are they paying for?
dim glacier
I'm prototyping new features in Apple pay. I need to validate Apple pay api's. Didn't really want to write a FE. Thought that Direct provides a nice BE+db and some FE with Vue.js. Save me some time.
Or maybe I understand it wrong. Vue.js is not going to save me time. I'll be better off to develop a FE in React and simply use Directus as BE + db.
Didn't know much about Vue.js to assess and just trying to get some advises before deciding whether to plunge into it.
fallow surge
Got it. So you don't really have any users in this case yet?
If it were me, I'd be prototyping in the same tools I'm going to deploy with. So if I'd eventually be plugging this into a React frontend project, I'd be prototyping this in React.
I'm using Directus as a backend for a couple applications - one that uses Stripe for subscriptions. It works wonderfully but I'm not giving the end-users access to the Directus Data Studio – they use a custom front-end built with Vue (Nuxt specifically).
To initiate payment / checkout - I call a custom Directus API route from the front-end and that returns my checkout session url and then the front-end redirects the user to that.
Or maybe I understand it wrong. Vue.js is not going to save me time. I'll be better off to develop a FE in React and simply use Directus as BE + db.
Vue is great. I love it. But it's not a requirement for using Directus as a backend – just if you want to develop custom extensions for the data studio.
So if you're faster and more comfortable in React and you don't really want to learn Vue, that's totally your choice.
That's one of the great things about Directus.
If you do want to have a play with Vue, I've got pretty good starter here that's built on Nuxt and already adds the Directus SDK via a plugin.
https://github.com/bryantgillespie/nuxt3-directus-starter
dim glacier
@fallow surge thanks for the write up. What I'm trying to do is to build a js script that demo a specific Apple pay feature provided by a 3rd party similar to Stripe before the actual integration into a React front end. It's sort of exploratory. The focus is on the script not on the integration and the infrastructure. It does not need BE and DB at all. However, Directus provides a complete FE that allow me to focus on the script. What's not clear to me is where to plug in the script due to my unfamiliarity of Vue.js. Your nuxt3-directus-starter looks interesting because all I need is several fields to input credit card #, name, expiration, cvc, and the charge amount with a button, which will run the script once clicked. What I'm trying to avoid is to build ,from the ground up, a React app just to run the Apple pay script. It'll probably take more time than the development of the script.
@fallow surge so, if I take your button example, how do I add an action to run a script when the button is clicked? I can hardcode all credit card info. for the demo. That should be cheapest for me to develop my script.
fallow surge
There's no need to keep using the @mention - because I get notified of your replies already.
You might have a look at Flows to see if that will work for you.
https://docs.directus.io/configuration/flows.html
You can set a flow to be Manually Trigger from the press of a button.
We have the Run Script operation which allows you to run whatever arbitrary Javascript you want.
dim glacier
Is flow available in 9.6.0? Sort of remember it's newer than that?
fallow surge
Off hand I'm not sure - if you go to Settings - you should see it
If you don't - time to upgrade
dim glacier
It's not clear from the doc that where these operations run? (in FE? or BE?) Apple pay is kind of peculiar. It only runs in Safari and apple devices with an Apple Wallet.
dim glacier
Do you have a "run script" example somewhere that I can try?
fallow surge
the operations run on the server
dim glacier
Got it. I'll better off starting from your repo. and add an action to a button.