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.

Needs work for a quick rebase

I rebased the current MR branch and opened a new one just to not squash the previous work with a force push. This should include all the efforts in this thread to date and provide some code cleanup along with allowing not just payment element support but also support setup intents used to do things like card on file, etc. when a payment isn't being created.

@mortana2k - Want to take a peek and make sure I didn't squash any of the original work? Tested with a local site that's been running the patches in this thread and it seems to work great. Would love further testing/review before we mark it as RTBC.

Hope this can cleanly merge in and provide some updates for folks wanting to implement this in various ways through custom modules.

I applied the patch and changed the example to work with the new render array.

1. Applied the patch
2. Changed my Form Example to match the new render key
3. Enabled Paypal as a Method in my Stripe Sandbox Dashboard
4. Paypal shows up as a method in my form
5. Select Paypal as Method
6. Submit the Form
-> I'm getting an error "Received unknown parameter: payment_method_data[return_url]".

I've added a domain to my Paypal Method Configuration in the Stripe Dashboard but with no success.

Besides that, I'm a bit confused on the documentation.
It says support for "Stripe Elements" and "Stripe Payment Request Button".
Stripe Payment Request Button supports Apple Pay, Google Pay and Link, so far understood.
"Stripe Elements" lists a page, that also includes this element as an example.
The current implementation provides only a "CC" Plugin, Credit Card, which is also used in the example.

Am I right to assume there's no possibility to use a payment provider like Paypal without implementing an own Plugin and handle the API Flow on the javascript Side (which currently seems to be hardcoded to card) or waiting for this patch to land?

@n1k I noticed the same issue, the commit in #32 should resolve your issue.

Anyone able to confirm if this makes things happy? If you do, feel free to drop in your steps to testing (similar to #31) and mark this RTBC.

We've integrated the 'stripe_payment' form element in a custom module.
I can confirm it works as expected.

1. We've used the last version of the branch stripe-3316114
2. We've created a custom form in a custom module with the stripe_payment element type.
   

         // Load the payment intent from the form state.
         $payment_intent = $form_state->getValue(['payment', 'payment_intent']) ?? [];
         $payment_intent['description'] = $payment['description'];
         $payment_intent['metadata']['reference'] = $payment['reference'];
         $payment_intent['automatic_payment_methods'] = ['enabled' => true];  
      
         $form['payment'] = [
            '#type' => 'stripe_payment',
            '#stripe_amount' => round($payment['amount']) * 100,
            '#stripe_currency' => 'EUR',
            '#stripe_country' => $payment['billingAddress']['country'],
            '#stripe_paymentintent_unique' => TRUE,
            '#stripe_paymentintent' => $payment_intent,
            '#required' => TRUE,
          ];
      

3. Enabled Card, Bancontact and Paypal as a payment methods in Stripe Sandbox Dashboard
4. It shows the following form element:
   
5. The card payment is handled onsite, and returns to a confirmation page, we redirect to in the form submit handler
6. Bancontact and Paypal are handled offsite, and redirect to /stripe/checkout afterwards

This seems to introduce errors in tests. See https://git.drupalcode.org/project/stripe/-/pipelines/558766 vs https://git.drupalcode.org/issue/stripe-3316114/-/pipelines/558737.