Weweb demo with Stripe Elements

[dorilama]

Hi, I just finished a demo project to test weweb.
The demo uses weweb auth, airtable and a custom plugin that integrates Stripe Elements.
Here is a link to the video of the demo.

Integrating custom code with weweb was really nice. Here is the link of the integration on github.

[Joyce]

This is so cool! Thanks for sharing @dorilama

[Quentin]

That’s so cool

Well done to have built this!

[dorilama]

Thank you both for the kind words

[aurelie]

Hi,
congratulation to your first element !
I have a bunch of feedbacks, lot of thinks which are not documentated on our side, so not your fault at all ! It’s just pointing me thinks which need to be documentated as best practises, and that we learned by developping a lot of them !

• I am not sure, but do you use that as a section or an element?
• ww-config.js and content should only contains properties which need to be edited or initialized inside editor, and saved in Weweb database. Here stripeLoaded and error are more state of your component than parameters. You should probably move them to data of your Vue component and delete them from the configuration file, as they do not need to be saved in Weweb server (not sure if i am clear or not?)
• If you plan to make it more reusable, I strongly advice you to let Weweb handle some css stuff such as width, radius and padding. So delete the css of your container, and let it be define by Weweb properties. It will probably look less cool when dropped from the source code, but then you can add cool base settings for that, and save it to your design system.
• For the same reason, it’s better to have one root dom element
• You can use other Weweb element inside your own so its more customizable. For example your button can be a wwElement of type ‘ww-button’ and then people can change easily color, padding , text etc
• Same stuff for the error text
• You can stripe code which are only used inside the Editor. This is better for performance (editMode for example does not exist in the published website, and some watcher are not mandatory)
• It is advanced usage, but you can add an editorOnly toggle to forced the display of error for a better editing experience :).
• Be sure that the clientSecret is handled correctly for security (not saved inside the editor, only provided as a variable from a request)

I am very happy and impressed by the fact that you manage to have element variable and custom event working !

If you want to talk about it an a video call, feel free to contact me, I will be happy to provide a more interactive and deep feedback about how to develop a Weweb element. It is very valuable for us to have feeback from external user on developing component.

[dorilama]

Hi,

thank you very much for your feedback, I appreciate it a lot.

TLDR: I am aware of some of the problems you mention. This first prototype was just a mix of the stripe doc with the weweb docs (es. the styles are the same as the stripe tutorial on elements) and the main goal is to get my feets wet with weweb, both editor and plugins.

Quick questions (more details in the long answer after this):

• how do you expose values to the app if not with properties? It seems I can’t find the payload of the triggered events in the editor.
• is there a better way than wwEditorState.editMode to detect edit mode to show a placeholder or disable buttons/other methods when in edit mode?
• is there a way to detect dev mode (both editor and preview) to handle the switch of api key from test to live?
• is there a way to set default values for wwElements (es. a default background color for a ww-button I add inside the plugin)

Now the long version:

• I was not sure as well . Now I think it should be an element without any style for the container

• You are clear. The idea is that I want to notify the app about error so I can show toast notification ecc. (es. try to pay with a declined card in the demo). stripeLoaded is not used in the demo but the idea is that because stripejs is loaded asynchronously you may need to know if it did not load correctly when the error occurs so that you can reload the page, but I am not convinced this is the best way of doing it.
  So the idea was to have a variable exposed to the app and read it when the event is triggered.
  Of course it make more sense to pass the error as a paylod of the event but then I don’t see the payload in the editor when setting up the workflow.
  So I checked the input element on github and for what I understand you are using wwLib.wwVariable.useComponentVariable to setValue of the property value. I tried to use that and it works but it does not smell good that I have to hide the property from the editor.
  I guess I am missing something regarding the event payload. What is the best way to expose values to the app?

• You are right. I am planning on removing the styles on the container and add the other properties that Stripe accepts for Elements.

• ops! My bad

• that is very useful, I didn’t know about it. Do you mean something like this in the ww-input-search? I am trying it now. It seems easier this way. Is there a way to set default values for some style (es. background color)?

• of course. This should actually be a wwElement and there should be an option to disable it if you want to display the messages in the app in other ways.

• I know but I am using wwEditorState.editMode to disable buttons when in edit mode, otherwise they trigger click methods when you select/click te element. This was happening for my button but from a quick test it seems it happens also if I use a wwElement of type ww-button as you suggested. Also you may want to show a different placeholder when in the editor (Stripe Elements are dynamic and you don’t control them so a placeholder seems better in edit mode), or you do not want to trigger some functions when in edit mode (load stripejs on mount but only if it is the preview)
  Is there a better way to detect edit mode and disable some functions?
  Also is there a way to detect if the plugin is used in development or test in order to handle the switch between test and live keys?

• I am not shure I get this. Are you referring to this https://developer.weweb.io/api/#property-editoronly? In my case the idea of editor property is to read it from the app and display it in any way you want.

• of course. clientSecret is not a secret key and is indeed provided as a variable from an API request and it is used by stripejs to setup elements (doc: Stripe API reference – The PaymentIntent object – curl and Accept a payment | Stripe Documentation). The api calls that require the stripe secret key for this demo are handled by a function on cloudflare workers that forwards requests to stripe using only the test key. It seems a flexible way to test stripe integrations. I understand that the api requests made from weweb with the “Make this request through a server” switched on expose all the parameters to the frontend anyway. Am I correct?

Thank you again for your feedback.

[dorilama]

I think I didn’t reply directly to this post. Sorry about that . See the previous post for my reply

[dorilama]

I just finished a new version of the Stripe Element integration with support for appearance customization.
Thanks to @aurelie for the help.

It is open source, you can fork the repo and import the element in your weweb dashboard.
You can find the repo on github.

[kevinwasie]

This is stupendious!! Thank you Dorilama!

[dorilama]

Thanks for the kind words Kevin

[Joyce]

The Stripe native integration is live!

[lelemarea]

Does this work with or without Roles and Permissions ? I mean i want to protect pages from free users but i can’t afford …ironic talking about payment methods,seems my wallet has Roles and Permission set to no by default .

[Dom]

Hi @Joyce, the plugin is really good. Would it be possible for weweb to expose the internal components of elements like this. For example, the outline button of the payment method can only be black - this doesn’t fit in with the visual style of the site. Refer to the screenshot. It would be great if there was an “advanced” mode which opens up all the internal workings / styling of components so they can be tweaked in their entirety.

[dorilama]

Hi,
this plugin does support style customization but is not the official Weweb component for Stripe Elements.

If you want to ask for a new feature for the official component you can start a new topic, or request a feature.

[Dom]

Hi @dorilama, not sure I understand re. “not the official Weweb component” - I got it from here (see screenshot). Should I be using something else?

[dorilama]

What you have in the editor is the Stripe integration that the Weweb team made some months ago. It is the official Stripe integration for Weweb, it’s ready to use in the editor and it is what you should use.
You can find the documentation here Stripe | Weweb documentation.

This topic is about a custom component, that integrates Stripe Elements, that I made in April before the official one. To use it you need to fork it on Github and add it to your weweb dashboard as custom component. As you can see from the example in my previous post it supports style modifications.

Anyway you should use the official one that you find in the editor.

It has options for style customization and presets as well:

Check the Stripe documentation to see how to use the “Custom Rules” parameter to change the border and other styles.
Feel free to open a new topic if you want to ask question about this.

[Dom]

Thanks - all clear now. Appreciate the help.

[ben]

Hi all - question in relatation to the WeWeb Stripe element. Our use case is one of only registring the payment method for future usage - subscription based. Per the documentation it seems like the element is only set to support an immediate payment / checkout (and not our use case). Is this a correct analysis - or can we use the element for our specific use case?
Thank you!

[dorilama]

Hi Ben, this topic is about a custom component I made to integrate stripe elements months before the official weweb component was developed. It was my test of the potential of weweb as a platform and I love it since then.
At the moment you can find the documentation of the official weweb component here.
You may want to start a new topic about your problem to have more visibility.