Add Donation Widget on the site

[moyvincent]

Description

The partner wants to add a widget to the side of the website to show a little bit of info about OSI and has an option for people to contribute.

The partner wants to copy the functionality on: https://members.opensource.org/donate/

Here is a quick Mockup the partner provided:

When the user clicks on either of the One-time or Yearly buttons, the rest of the fields are displayed:

This is the Mobile/Tablet view:

Reference

Zendesk
Dev Repo

[gin0115]

Have started on this and got it all cloned down locally to investigate. It looks like the members site uses a version of CiviCRM to handle the donations, ive requested access to the member's site in slack.

Will see if its possible to use the existing functionality, if not we can possibly do this using the T51 donations plugin, but will try and leverage what they already have if possible.

[xpurichan]

👋 Wanted to confirm that you received the access you needed @gin0115 . Let me know!

[gin0115]

Hey

Sadly i was told its not something i can work on as its not held in Team51 Repos, so its been added back to the triage queue, sorry @xpurichan

[xpurichan]

No worries, thanks for confirming @gin0115 ! I see this will be re-assigned out next week.

[nickpagz]

I've had a brief look at this and there's two main things to address here. One is the page templates, the other is donation handling.

1. Page Templates - In order to add a donation widget in a sidebar we'll need to update page templates to include a sidebar. The only page with a sidebar at the moment is the blog archive page. Do we know which post types or pages will have the donation widget? Also, based on the mock-ups, the width of the sidebar is greater than on the blog page, so this would need some different styling applied. I think the best approach here would be to register a new widget area specifically for the pages where we want it to appear. This would make it easier to add/change whatever donation solution is implemented. Never mind, I just read the Zendesk ticket which is very specific on the page and location. I'll start looking into a solution for this.
2. Donation handling - as mentioned above, the members site uses CiviCRM for the donations, among other things. It would probably make sense to use the same solution here, though we would probably need to install the plugin and connect it up. It seems like overkill, though I'm not familiar enough with the plugin/platform. Another option could be the Team 51 Donations plugin - which would also require WooCommerce, WooCommerce Subscriptions, and a hookup to potential gateways. There's also other standalone donation plugins, all of which also require connections to payment gateways. Is there a preferred route we're looking to go here?

[smaffulli]

Glad to read you sorted out 1.

For donation handling, we should really make an effort to use Civi, ideally through its API. We need to find a way to build a donation form that uses the Civi installation we have on members.opensource.org. @ajolo2ky can you please loop in Bryan to address this?

[ajolo2ky]

Sure. I've created ticket #7880 for him.

opensource.org and members.opensource.org are connected through Civi, so I think the easiest way is to create a new Contributions Page and develop a quick plugin to fetch its HTML code through the API, but let's wait and see what Brian has to say.

[ajolo2ky]

I realized there's a simple option to allow embedding Contribute Forms from Civi elsewhere. Here's a quick example: https://registro.nerdear.la/civijs.php

This is the javascript provided by Civi:

<!-- The stylesheet link is optional and can be removed 
if you want to style the form yourself, or if you 
already are including a bootstrap css environment. -->
<link rel="stylesheet" property="stylesheet" href="https://members.opensource.org/wp-content/civicustom/ext/net.ourpowerbase.remoteform/remoteform.css">
<link rel="stylesheet" property="stylesheet" href="https://members.opensource.org/wp-content/civicustom/ext/net.ourpowerbase.remoteform/spin.css">
<div id="remoteForm"></div>
<script src="https://members.opensource.org/wp-content/civicustom/ext/net.ourpowerbase.remoteform/remoteform.js"></script>
<!-- Extra JavaScript URLs, if any: ... -->
<script> var remoteFormConfig = { 
 url: "https://members.opensource.org/civicrm/remoteform/",
 id: 7,
 entity: "ContributionPage",
 // Uncomment line below for test mode,
 // paymentTestMode: true,
 // Extra JavaScript Params, if any: ...
};
if (typeof remoteForm !== "function") {
  document.getElementById("remoteForm").innerHTML = "Oh no! I was not able to display the form! Please check your security settings (for example Privacy Badger) and allow remote javascript to be displayed from members.opensource.org."
  document.getElementById("remoteForm").style.color = "red";
}
else {
  remoteForm(remoteFormConfig);
}
</script>

I've added the staging website in our CORS policy. Could you please try it and let me know if it works.
Then we'll have to do some visual touches for it to look good, but let's first try to see if this is technically viable.

Thanks,

[smaffulli]

this is perfect! If we can put the Google|Apple Pay option in that Civi form that'd be golden!

…

On Fri, May 10, 2024 at 3:10 AM Ariel Jolo ***@***.***> wrote: I realized there's a simple option to allow embedding Contribute Forms from Civi elsewhere. Here's a quick example: https://registro.nerdear.la/civijs.php This is the javascript provided by Civi: ` <script src=" https://members.opensource.org/wp-content/civicustom/ext/net.ourpowerbase.remoteform/remoteform.js"></script> <script> var remoteFormConfig = { url: " https://members.opensource.org/civicrm/remoteform/", id: 7, entity: "ContributionPage", // Uncomment line below for test mode, // paymentTestMode: true, // Extra JavaScript Params, if any: ... }; if (typeof remoteForm !== "function") { document.getElementById("remoteForm").innerHTML = "Oh no! I was not able to display the form! Please check your security settings (for example Privacy Badger) and allow remote javascript to be displayed from members.opensource.org." document.getElementById("remoteForm").style.color = "red"; } else { remoteForm(remoteFormConfig); } </script>` I've added the staging website in our CORS policy. Could you please try it and let me know if it works. Then we'll have to do some visual touches for it to look good, but let's first try to see if this is technically viable. Thanks, — Reply to this email directly, view it on GitHub <#71 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKJJAEGV6EXFQUVKPVV6W3ZBQNB7AVCNFSM6AAAAABG2U3TP2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBTGY3TGOBWGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[nickpagz]

I've made a first go at adding a sidebar widget area called "License Sidebar" (in Appearance > Widgets) and pasted in the script above. I've un-commented the test mode attribute. Sample page here, though any license will show it.
The good news is it works, and we can probably use this as the way forward. The bad/tricky part is the styling of the form. I'm not sure why, but it seems the script provided by Civi is just a generic one with the correct form ID. I say that because I was expecting the same form element selectors and styling/stylesheet, but it's not the case. Even if I link the relevant stylesheets from members.opensource.org nothing happens because of the missing selectors on the form elements.

Can we find out if it's possible to also pull the form element selectors the same way it renders on the members site?

[ajolo2ky]

Thanks for testing it out! I've reached out our Civi developer to see if he can help us with the styling.

[ajolo2ky]

@nickpagz this is his response:

from what I understand remote form intentionally breaks from the Civi styling to present a more stripped down markup because the assumption is that the site where you are embedding the form will have it's own styling that you would want to match. in other words, you would adjust the styling on your target website so have the embedded form match.

re: form element selectors specifically -- all of the form elements have unique IDs, so they should be easily selectable.

[nickpagz]

Ok, let me see what I can do.

[nickpagz]

@ajolo2ky @smaffulli
I've been poking around a bit more with this and looking at options. I should be able to style the remote form to get close to the members site with one major exception - the recurring donation. As far as I can tell, the remote form extension doesn't support recurring donations. If that's not an issue, then I'll work on styling the remote form.

If recurring donations are a must, then we can consider alternatives such as a basic link to redirect users to members.opensource.org/donate/, potentially with pre-populated selections, other donation plugin/form options outside of civiCRM, or potentially a custom solution through the civiCRM API (I haven't looked into this option yet, and what is possible here).

Looking forward to your thoughts.

[ajolo2ky]

Let's get this started, if in the next three months we get a good flow of donations we will consider expanding the functionality. Please move forward!

Thanks,

[nickpagz]

@ajolo2ky I've tried a few different options for getting this form to submit without any real success. It's not clear if this is the remote form extension not working, I'm doing it wrong, or some other issue (like CORS policy - see below).

I've mainly tested this with Form 7 which is Paypal based, and later with Form 17 which appears identical to 7, but Stripe based. Regardless of the form, remoteForm adds "required" credit card fields. I've tried removing them for the Paypal form in various ways (including the remote form custom cfg options createFieldDivFunc and customSubmitDataFunc with custom functions), but none were successful.

For reference, you can test either form by going to the widgets section and under the License Sidebar widget area, in the HTML widget change the id to either 7 or 17. Form 7 (Paypal) is currently the active form - example page: https://open-source-initiative-development.mystagingwebsite.com/blog/license/artistic-1-0

When trying to submit Form 7, I run into a CORS policy error:

And when I try to submit Form 17, I get a 500 error:

I'm wondering if you can reach out to your civi dev and see if they can provide any insight on the above errors, and hopefully a way forward.

cc: @ahegyes

[ajolo2ky]

Hi,

I've reached out to our developer and update as soon as I hear back.
Thanks,

[ajolo2ky]

Hi,

We have a new contribution page, ID 19, could you try with that one instead of 7 or 17 ?

[nickpagz]

Hey @ajolo2ky
I had a chance to circle back to this and adjust the script to work with form ID 19. It looks like the 500 response is a bit of a red herring. It appears only when my script (for formatting/layout) is activated. So, as a test, I commented out the customInitFunc: osiFormInit line in the remoteFormConfig settings in the sidebar widget. This basically allows the remoteForm to work without any interference (or styling) for testing purposes. What I'm ending up with is the form submission getting blocked due to CORS policy (see the screenshot below). If we can get it working in this format, then I can work on the form manipulation part to try and avoid the 500 error - which I'm assuming is related to the submitted data not being presented correctly. Let me know if your developer can help with the CORS issue.

[toncijajic]

@nickpagz noting I've pinged @ajolo2ky in the email about this last comment, too.

[ajolo2ky]

Hi, sorry for the delay, I was away.

I've added @lcdservices as a contributor. He is our CiviCRM developer and I think it would be faster if you interacted with him directly. I'm here following the issue in case you need anything on my end.

Best,

[toncijajic]

@nickpagz @lcdservices could you confirm you two connected about this in any way?

[lcdservices]

@nickpagz sorry for the delay following up on this. The page you linked to previously doesn't appear to have the form anymore. Can you setup a new test page that includes the remoteform js and we can troubleshoot there before adding it to the "real" page? We should be using form ID 19, and I've made one change at my end to address a possible issue. But I'll need something setup for testing at your end to try to troubleshoot the CORs issue further.

[nickpagz]

@lcdservices My turn to apologize on the delay here! It looks like another PR wiped out the changes I had made to the theme, but I've added them back now. You should now be able to see the form here:
https://open-source-initiative-development.mystagingwebsite.com/license/artistic-1-0

I'm bypassing my script (osiFormInit) for now as this was causing a 500 response, and is really only being used for styling/layout changes. With it out of the way you should be able to now see the CORS issue in the console.
If/when we resolve that issue I can jump back in and try to resolve the issues with my script.

[ajolo2ky]

Hi, after all the back and forth we decided to go with a much simpler choice. I integrated a Stripe card and it's now working in stg:
https://open-source-initiative-development.mystagingwebsite.com/license/w3c

Could you please promote the license template with the sidebar to production ?

[nickpagz]

Thanks @ajolo2ky I'll get the PR cleaned up and pushed out this week.

[nickpagz]

@ajolo2ky The license sidebar template is now live on production. You can add the Stripe donation code to it now.

Please let me know if you run into any issues.

[ajolo2ky]

Hi, I added it and it's working, thanks. Minor fix (test in stg and then we move to prod):

Could you separate a little more the body of the license and the sidebar ? ideally the donation box would fit visually right below the OSI approved license logo

[nickpagz]

Sure thing! Let me see what I can do.

[nickpagz]

@ajolo2ky I've made the adjustment on the staging site. Let me know what you think.

[wpspecialprojects]

@ajolo2ky checking to make sure you saw this thread

[ajolo2ky]

Thanks for the nudge. Looks good, please promote it to prod.

[toncijajic]

@nickpagz noting the above.

[nickpagz]

@ajolo2ky My apologies for the delay! I've now merged the change to the production site, though it looks like the donation widget code is commented out. If/when the code is reactivated and you notice any issues, please let me know.

[toncijajic]

@nickpagz noting I've pinged @ajolo2ky in the email too, to move this forward.

[ajolo2ky]

Hi, yes, just responded in the thread over email. Thanks for pushing this. Let's close the issue as we need to implement some internal processes before enabling this again.