Payment Provider: Stripe

[Basti]

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

Stripe | Payment Processing Platform for the Internet

Stripe is a suite of APIs powering online payment processing and commerce solutions for internet businesses of all sizes. Accept payments and scale faster.

stripe.com

1) Create your api key and secret and paste them into VisioList admin settings

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


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

 

[boozhloo2]

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.

 

[Mark]

The upgrade bundle is available like always in the members download section, and the forum thread https://visiolist.com/community/threads/visiolist-1-9.2381/

 

[boozhloo2]

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:

{


  "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"

}

 

[Basti]

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

 

[boozhloo2]

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

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

 

[boozhloo2]

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?

 

[Basti]

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]

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

<div id="{$provider}-container" class="card card-body mb-3 cursor-pointer payment-provider default-provider selected">

replace it with this

<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

// 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

// 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 }));

 

[boozhloo2]

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

<div id="{$provider}-container" class="card card-body mb-3 cursor-pointer payment-provider default-provider selected">

replace it with this

<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

// 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

// 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]

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).

 

[Basti]

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]

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.

 

[Basti]

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