Add support for Stripe Payment Element

Anna D → made their first commit to this issue’s fork.

Anna D → closed merge request !8

Awesome @mortona2k you save my day

Payment Element allows to add https://stripe.com/docs/payments/buy-now-pay-later methods (Affirm, Afterpay / Clearpay, Klarna).

They required some return_url option.

Added controller with Event to process payment intent.

P.S Sorry I did wrong action to push to the opened MR. So attaching patch instead.

FYI todo for future Afterpay also requires shipping details for confirmPayment.

Updated patch

Provided string instead of url object

Issues should target dev.

Combined @mortona2k commit and previous patch(interdiff) for testing

Took a quick look at the code as I was looking for something, and noticed some minor things:

+++ b/js/stripe.js
@@ -134,99 +157,112 @@
+          // if (elementSettings.type == 'paymentrequest') {
+
+          //   var paymentRequest = stripe.paymentRequest({
+          //     country: elementSettings.country,
+          //     currency: elementSettings.currency,
+          //     total: {
+          //       label: elementSettings.label,
+          //       amount: elementSettings.amount,
+          //     },
+          //     requestPayerName: true,
+          //     requestPayerEmail: true,
+          //   });
+
+          //   stripeElementOptions.paymentRequest = paymentRequest;
+
+          //   // Create an instance of the PaymentRequest Element
+          //   stripeElement = elements.create('paymentRequestButton', stripeElementOptions);
+
+          //   // Check the availability of the Payment Request API first.
+          //   paymentRequest.canMakePayment().then(function($element, result) {
+          //     if (result) {
+          //       var $form = $element.closest('form');
+          //       stripeElement.mount($element.find('.drupal-stripe-element')[0]);
+
+          //       stripeElement.on('click', function(event) {
+          //         event.preventDefault();
+          //         if (HTMLFormElement.prototype.reportValidity) {
+          //           if (!$form[0].reportValidity()) {
+          //             return false;
+          //           }
+          //         }
+          //         $form.trigger('stripe:submit:start');
+
+          //         var ajaxId = new Date().getTime();
+          //         $element.attr('data-drupal-stripe-trigger', ajaxId);
+          //         $element.find('.drupal-stripe-trigger').val(ajaxId);
+
+          //         var formValues = $form.find(':input').not('.drupal-stripe-trigger, input[name="form_build_id"]').serialize();
+          //         $form.attr('data-stripe-form-submit-last', formValues);
+
+          //         $element.find('.drupal-stripe-update').trigger('mousedown');
+          //       });
+          //     } else {
+          //       $element.parent('.form-type-stripe-paymentrequest').hide();
+          //     }
+          //   }.bind(null, $element));
+
+          //   paymentRequest.on('cancel', function() {
+          //     $form.trigger('stripe:submit:stop');
+          //   });
+
+          //   paymentRequest.on('paymentmethod', function(ev) {
+          //     // Confirm the PaymentIntent without handling potential next actions (yet).
+          //     stripe.confirmCardPayment(
+          //       client_secret,
+          //       {payment_method: ev.paymentMethod.id},
+          //       {handleActions: false}
+          //     ).then(function(confirmResult) {
+          //       if (confirmResult.error) {
+          //         // Report to the browser that the payment failed, prompting it to
+          //         // re-show the payment interface, or show an error message and close
+          //         // the payment interface.
+          //         $element.trigger('stripe:error', confirmResult.error.message);
+          //         ev.complete('fail');
+          //         $form.trigger('stripe:submit:stop');
+          //       } else {
+          //         // Report to the browser that the confirmation was successful, prompting
+          //         // it to close the browser payment method collection interface.
+          //         ev.complete('success');
+          //         // Check if the PaymentIntent requires any actions and if so let Stripe.js
+          //         // handle the flow. If using an API version older than "2019-02-11" instead
+          //         // instead check for: `paymentIntent.status === "requires_source_action"`.
+          //         if (confirmResult.paymentIntent.status === "requires_action") {
+          //           // Let Stripe.js handle the rest of the payment flow.
+          //           stripe.confirmCardPayment(client_secret).then(function(result) {
+          //             if (result.error) {
+          //               $element.trigger('stripe:error', result.error.message);
+          //               // The payment failed -- ask your customer for a new payment method.
+          //             } else {
+          //               // The payment has succeeded.
+          //               $form.trigger('stripe:submit');
+          //             }
+          //           });
+          //         } else {
+          //           // The payment has succeeded.
+          //           $form.trigger('stripe:submit');
+          //         }
+          //       }
+          //     });
+          //   });
+
+          // }

Can we remove this stuff that's commented out?

+++ b/src/Element/Payment.php
@@ -0,0 +1,27 @@
+class Payment extends StripeBase {
+
+  protected static $type = 'payment';
+
+
+  public static function processStripe(&$element, FormStateInterface $form_state, &$complete_form) {

Double newline here; one can be removed.

Fixing title.

Cellar Door → made their first commit to this issue’s fork.

Cleaned up the branch commit history to include @Anna-D's commit and rebased off the project 2.x branch so the MR can be cleanly merged in.

Added automatic_payment_methods[enabled]=TRUE option

According to the documentation https://stripe.com/docs/payments/payment-methods/integration-options#cho...

It means that payment methods will be applied automatically according to Stripe account settings

Note: testing mode shows all methods

Anna D → closed merge request !9

Thank @Cellar Door for your help.

Added some missed changes from #15 patch to the commit.
Tested Klarna, Affirm and Card payment works.

Here's an immutable patch for Composer builds.

Thanks for all the good work so far on this.

Needed to pass in the stripeElementOptions to the new payment element.

I hope I did this right. Here is the merge request:

https://git.drupalcode.org/issue/stripe-3316114/-/merge_requests/2

Also provided an immutable patch for Composer builds.