Add support for Stripe Payment Element

Created on 18 October 2022, over 1 year ago
Updated 3 May 2023, about 1 year ago

Problem/Motivation

Stripe provides elements for payment and other ecommerce needs.

This module has Card and Payment Request elements.

Let's add this Payment element: https://stripe.com/docs/payments/payment-element

Steps to reproduce

Proposed resolution

Extend StripeBase Element.

Remaining tasks

Create class, update JS.

✨ Feature request
Status

Needs review

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡¦Ukraine Anna D

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

  • @anna-d opened merge request.
  • @anna-d opened merge request.
  • πŸ‡ΊπŸ‡¦Ukraine Anna D

    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.

  • πŸ‡ΊπŸ‡¦Ukraine Anna D

    Updated patch

  • πŸ‡ΊπŸ‡¦Ukraine Anna D

    Provided string instead of url object

  • Status changed to Needs review about 1 year ago
  • πŸ‡ΊπŸ‡¦Ukraine Anna D

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

  • Status changed to Needs work about 1 year ago
  • πŸ‡¨πŸ‡¦Canada colan Toronto πŸ‡¨πŸ‡¦

    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.

  • πŸ‡¨πŸ‡¦Canada colan Toronto πŸ‡¨πŸ‡¦

    Fixing title.

  • πŸ‡ΊπŸ‡ΈUnited States Cellar Door

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

  • Open on Drupal.org β†’
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 8
    last update about 1 year ago
    Not currently mergeable.
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 8
    last update about 1 year ago
    1 pass
  • Status changed to Needs review about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States Cellar Door

    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.

  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 8
    last update about 1 year ago
    1 pass
  • πŸ‡ΊπŸ‡¦Ukraine Anna D

    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

  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 8
    last update about 1 year ago
    1 pass
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 8
    last update about 1 year ago
    1 pass
  • πŸ‡ΊπŸ‡¦Ukraine Anna D

    Thank @Cellar Door for your help.

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

  • πŸ‡¨πŸ‡¦Canada colan Toronto πŸ‡¨πŸ‡¦

    Here's an immutable patch for Composer builds.

Production build 0.69.0 2024