OCC-115: Migrate to payment element from card element

[wAsnk]

OCC-115
Followed docs https://stripe.com/docs/payments/payment-element/migration. Had to made some changed in the workflow of how the payment intent is created and handled also did some refactoring in the logic.
Automatically listing payment methods in the payment intent element now.
Using the recommended webhook events instead of depending on the return url.

Supported payment methods by this PR:

• Card
• iDeal
• Google pay
• giropay
• Bancontact
• EPS
• Alipay
• Przelewy24
• Link
• Apple Pay most possibly is working (uses the same procedure as Google pay), but needs extra steps on the Stripe dashboard and a file upload on a live site exposed to the internet

Stripe webhook local test:

1. Install the Stripe CLI and log in to authenticate your account.
2. Set listening endpoint stripe listen --forward-to https://localhost:[port]/stripe-webhook
3. Checkout and pay.

[sarahelsaig]

I set up the local stripe CLI but it keeps looping for me on the "Confirming payment." page. The payment intent status is "succeeded" but the order status is still "pending".

[wAsnk]

I set up the local stripe CLI but it keeps looping for me on the "Confirming payment." page. The payment intent status is "succeeded" but the order status is still "pending".

Could you write me down the repro steps because it works on a fresh clone for me. What I do:

0. Enable OCC features.
1. Set default currencies to EUR.
2. Set API pubkey and secret key to the publicly available keys (You don't need to set the webhook key for local testing BCS that's the default)
3. Run OC Product recipes
4. Set TestProduct currency to EUR
5. Run stripe listen --forward-to https://localhost:5001/stripe-webhook.
6. When you add the product to the cart then you checkout you should already see these:
   
   When you select a bank redirect method (e.g. iDeal) you should get this:
   
   When the payment succeeds you should get these two:
   

[sarahelsaig]

1. Nothing shows up in my console when I click checkout. EDIT: the logs start to appear once I use the publishable and secret keys from the my stripe dev account (here). However the HTTP statuses are 400 instead of 200. The dev workflow is still not clear, please elaborate the documentation.
   

2. Is switching to EUR actually necessary? If yes, please explain why in the readme. Also I please update the Stripe setup instructions there.

3. I did a new setup and then after the first try I keep getting this error. It seems to generate the same payment intent over and over, even after I clear my cart or change the shipping and billing address.
   

[sarahelsaig]

Where does this secret come from? I can't find it anywhere in the documentations and when I run stripe it shows a different secret. Please include a source link in the comment above.

[wAsnk]

Okay, so it might have been a generated local test key for me as well. It's coming from here:
https://dashboard.stripe.com/test/webhooks/create?endpoint_location=local

[sarahelsaig]

Since your latest changes, now checkout doesn't get stuck any more. 👍