Payment Provider: Stripe

Basti

Administrator
Staff member
Quick guide on how to setup this provider.
Your website must be in https or this provider does not work, none of the default providers do in that regard


1) Create your api key and secret and paste them into VisioList admin settings
1.png
2) Create your webhook and fill the details as in the screenshot
- Endpoint URL: https://www.your-site.com/index.php?a=payment_ipn&provider=Stripe
- It must match your list url, so take note if you have to enter www or not
- The actual provider name is case sensitive. Make sure its entered exactly has above
2.png

3) Once you added your endpoint, click on it. On the next page, grab your webhook secret key and paste it into VisioList admin settings
3.png
 
Last edited:

boozhloo2

Member
Awesome releases!

Is there a way to update to 1.9 other than a fresh installation? Kind of like when the 1.8 version came out there were 2 options one being for a fresh install and another for upgrading.
 
Last edited:

boozhloo2

Member
Posted this in the wrong section so I moved it here instead:


The stripe payment method doesn't redirect to checkout when clicking on the checkout button. It grays out for about 10 seconds, and clicking it afterwards won't function.

Made sure to follow Basti's steps.

From the looks of it, it's because of the end-point URL, I copied the one from Basti's example.
It returns a cloudflare error 526 invalid SSL certificate when I try to access it manually.


Here's the log report:


Code:
{


  "url": "https://www.my-site.com/index.php?a=payment_ipn&provider=Stripe",



  "description": "Visiolist",



  "enabled_events": [



    "payment_intent.payment_failed",



    "payment_intent.processing",



    "payment_intent.succeeded"



  ],



  "connect": "false"

}
 
Last edited:

Basti

Administrator
Staff member
Well, i hope you did changed the actual domain name in the endpoint url? Looking at the log report, you did not ;)
 

boozhloo2

Member
Well, i hope you did changed the actual domain name in the endpoint url? Looking at the log report, you did not ;)
Oh yes, I did! It's just a prop I copied on here:p

It returned a "200 OK" HTTP Status on Stripe's end
 
Last edited:

boozhloo2

Member
Okay, weird update: it works only if paypal is enabled as a payment method in combination with it, and then click on Stripe and go for "checkout" it proceeds. Otherwise it doesn't seem to go through at all.

Any takes?
 
Last edited:

Basti

Administrator
Staff member
So it doesnt let you prooceed unless there is another provider enabled and you can select stripe?
Thats actually something i haven't tested.

Give me a bit ill test it out and let you know, please keep paypal enabled until then, or just disable all
 

Basti

Administrator
Staff member
Ok i found the issue, i hardcoded paypal as the default selected provider instead of making the first provider in the list the default selected one
As a result, there is a javascript error because a certain selector can't be found

Please open payment_form_PayPal.html of your skin
Find this line
HTML:
<div id="{$provider}-container" class="card card-body mb-3 cursor-pointer payment-provider default-provider selected">
replace it with this
HTML:
<div id="{$provider}-container" class="card card-body mb-3 cursor-pointer payment-provider">
Next up, open payment_form_provider_javascript.html
Find this line
JavaScript:
// replace the default disabled checkout button with the default provider submit handler
payment_providers.querySelector('.default-provider').dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
replace it with this
JavaScript:
// replace the default disabled checkout button with the first provider submit handler
payment_providers.querySelector('.payment-provider').dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
 
Last edited:

boozhloo2

Member
Ok i found the issue, i hardcoded paypal as the default selected provider instead of making the first provider in the list the default selected one
As a result, there is a javascript error because a certain selector can't be found

Please open payment_form_PayPal.html of your skin
Find this line
HTML:
<div id="{$provider}-container" class="card card-body mb-3 cursor-pointer payment-provider default-provider selected">
replace it with this
HTML:
<div id="{$provider}-container" class="card card-body mb-3 cursor-pointer payment-provider">
Next up, open payment_form_provider_javascript.html
Find this line
JavaScript:
// replace the default disabled checkout button with the default provider submit handler
payment_providers.querySelector('.default-provider').dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
replace it with this
JavaScript:
// replace the default disabled checkout button with the first provider submit handler
payment_providers.querySelector('.payment-provider').dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
Thanks Basti, that was the issue.

It works flawlessly now!
 

boozhloo2

Member
Update on the Stripe integration: I just received 2 payments recently, I got the email notification from Stripe and they appeared in successful payments in the Stripe payments received dashboard. However, none of the transactions registered in VL_payment_logs, VL_payment_logs_error.
The Premium Membership wasn't activated (meaning VL_sites for these 2 users still have the values of premium_flag = 0 and weeks_buy = 0, total_day = 0, remain_day = 0).
 
Last edited:

Basti

Administrator
Staff member
Look at your webhook logs within stripe, i assume something is wrong somewhere. The third screenshot on post #1 if i remember correctly it shows webhook events there?

Any php error should end up in the database logs, so unlikely something wrong there. I suspect the webhook url simply isnt called, or you still setup something wrong. https? www or no www?
 

boozhloo2

Member
You're right. I hopped onto the developers area to look into the webhook events, it shows all attempts failed (this webhook delivery failed. Stripe will try to redeliver the event in 6 hours.) although some of the 'event types' are marked as payment_intent.succeeded rather than payment_intent.failed they are still tagged with failed webhooks. When I extend on specific payment events, it shows an HTTP status code 526 (the issue mentioned earlier in this thread). When the URL is tested on a browser, it returns a cloudflare 526 error.

As for the URL, it's written as such:
https://www.My_Domain.com/index.php?a=payment_ipn&provider=Stripe

---- Update ----
It's an SSL issue related to all URLs with 'www' inclusive. If anyone experiences something similar, just drop the 'www' in the URL as such for a quick fix:

https://My_Domain.com/index.php?a=payment_ipn&provider=Stripe

and it should go through as 'successful' on Stripe's end. The subscription seems to be passing through and payments are properly logged now.
 
Last edited:

Basti

Administrator
Staff member
Yea thats why i mentioned www or no www.
It must match your list url, so take note if you have to enter www or not
Regarding your 526 error, it would be good if you fix that, VL would normally redirect anyone who enters www to your no www version ( thats what you have in settings ) - many people still type www

Do you have the proper cname dns entry for www inside cloudflare?

If needed, let us continue inside private message, since no longer related to stripe
 
Top