Stripe Express Checkout Element Integration

We've applied this as a patch and tested, it work great. We're deploying it to a production site tomorrow. Not sure if you want to call that "Reviewed and tested by the community or not".

Thanks!

niharika.s → changed the visibility of the branch 3477028-stripe-express-checkout to hidden.

Whao, super nice to see this, really looking forward to the express functionality, this will be huge! Thank you!

anybody → changed the visibility of the branch 3477028-stripe-express-checkout to active.

anybody → changed the visibility of the branch 8.x-1.x to hidden.

Any further plans here @vmarchuk I think this is a super important feature. It's assigned to you currently, so nobody else will work on it so far.

Does this patch currently reset things properly when someone exits the Express Checkout Element and goes through normal checkout to pay via the Payment Element? We're getting reports from production usage that someone exiting one path and going to the other causes data loss.

Any feedback or plan to share @vmarchuk?

@anybody
We're currently working on this and want to launch it soon.

@vmarchuk thanks for the feedback, that's great news! 🎉 Let us and @rszrama know when it's ready for review by the community.

Added a patch for compatibility with version 1.3.

@vmarchuk, @rszrama is there work going on in the background on this issue or any further plan or should we simply review & test it and send feedback as-is?

Thank you! :)

@anybody,

This is already being used on production sites.

We are in final testing before committing. (We generally try to test in different use cases/scenarios before committing, especially a larger feature add like this.)

Found some minor issues during recent testing that @vmarchuk has since addressed.

If you have any issues/feedback, please provide! (Note that, depending on the issue, we will likely still commit and tag a release, then follow up in a future commit/release.)

Cool, thank you @tomtech! Then we'll also try it now! That sounds amazing, very much looking forward to the official release!

Latest MR as patch attached.

Clearer versioned patches attached.

Hi, we just tried the Stripe Express Checkout Element and these are our observations:

The wrappers are correctly placed on the cart page:
<div id="payment-errors"></div><div id="stripe-express-checkout-element" data-drupal-selector="edit-stripe-express-checkout-element"></div>

The JavaScript initializes the Express Checkout within the element:

<div id="stripe-express-checkout-element" data-drupal-selector="edit-stripe-express-checkout-element" data-once="stripe-processed" class="StripeElement">
    <div class="__PrivateStripeElement" style="margin: -4px 0px !important; padding: 0px !important; border: medium !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important; transition: height 0.35s !important;">
        <iframe name="__privateStripeFrame3093" frameborder="0" allowtransparency="true" scrolling="no" role="presentation" src="https://js.stripe.com/v3/elements-inner-express-checkout-with-shared-39bb4efb86b60c9971566f493d873828.html#__shared_params__[version]=v3&amp;wait=false&amp;rtl=false&amp;publicOptions[paymentMethods][applePay]=never&amp;publicOptions[paymentMethods][googlePay]=never&amp;publicOptions[paymentMethods][amazonPay]=never&amp;elementsInitSource=stripe.elements&amp;componentName=expressCheckout&amp;keyMode=live&amp;apiKey=pxx&amp;referrer=https%3A%2F%2Fwww.example.com%2Fcart%3FWDEBUG&amp;controllerId=__privateStripeController3091" title="Sicherer Rahmen für schnelle Bezahlvorgänge" style="border: 0px !important; margin: -4px; padding: 0px !important; width: calc(100% + 8px); min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; transform: translate(0px) !important; color-scheme: light only !important; height: 80px; transition: height 0.35s, opacity 0.4s 0.1s;"></iframe>
    </div>
</div>

But the iframe is empty (white) and shows no payment methods.

So either I'm doing something wrong or miss something. Maybe it needs additional documentation for the setup?

Because of https://docs.stripe.com/elements/express-checkout-element#supported-brow... I tried it in Firefox and Chrome as logged-in user.

Maybe other users will run into similar issues in the future, so I hope my comment helps.

@anybody
You can try to test it here https://express-checkout-ttkizeq-gugct5y3vw43w.us-2.platformsh.site/ (this is our demo environment). If you see buttons, it means something is wrong with your environment settings.
There are many reasons why buttons may not be showing: Stripe configurations, browser, no wallet for the account, etc.
See a screenshot of what I see here: https://express-checkout-ttkizeq-gugct5y3vw43w.us-2.platformsh.site/

@vmarchuk the testing environment is currently broken, could you revive it?
TypeError: Drupal\Core\Entity\Sql\DefaultTableMapping::Drupal\Core\Entity\Sql\{closure}(): Argument #1 ($definition) must be of type Drupal\Core\Field\FieldStorageDefinitionInterface, __PHP_Incomplete_Class given in Drupal\Core\Entity\Sql\DefaultTableMapping::Drupal\Core\Entity\Sql\{closure}() (line 175 of core/lib/Drupal/Core/Entity/Sql/DefaultTableMapping.php).

So we could proceed the comparison. Would it be possible to share a screenshot of your Drupal Stripe payment gateway settings? (admin/commerce/config/payment-gateways/manage/stripe_payment_element)

@vmarchuk the testing environment is currently broken, could you revive it?

Already told Jonathan about that via Slack, he is already at it / forwarded it.

Note, that !MR 129 is against 2.0.x, seems like that is a mirror of 2.x?

The environment is fixed.

Would it be possible to share a screenshot of your Drupal Stripe payment gateway settings? (admin/commerce/config/payment-gateways/manage/stripe_payment_element)

See the attached screenshot.

Thank you so much @jsacksick and @vmarchuk! We're on it!

Added a few comments on the MR. Furthermore, when pressing e.g. the amazonPay checkout button, I get the following error in console:

Uncaught (in promise) IntegrationError: The amount 1986 is less than the total amount of the line items provided.

And the Amazon popup just loads infinitely.

I do not get this error when e.g. using the express checkout buttons from commerce_paypal.

Ok, the problem is the VAT that is part of the line items, even if it should be already included in the price of the products:

I'll have a closer look at this tommorow.

@grevil: I think the logical mistake is, that only product line items should be included in the JSON generally and never adjustments. I didn't look into the code, but hopefully it's easy to find the reason how VAT comes in here.

Ok, I found the issue. Adjustments were added as "extra_line_items", leading to this error.

Although this code seems intentional, I could not yet find the reason it was coded this way. @vmarchuk could you give feedback, on why the adjustments were added as line items? It might be needed for "onShippingRateChange()" and "onShippingAddressChange()" but not passed to the js eventually? Or we need to revert https://git.drupalcode.org/project/commerce_stripe/-/merge_requests/129/... again and just add a check?

Ignore #40 ✨ Stripe Express Checkout Element Integration Active we now skip the adjustment if it is of type "tax" and already included in the line item price. Meaning, the original implementation of "commerce_stripe_get_express_checkout_order_line_items" by @vmarchuk is restored again (with the mentioned check included).

But I am still unsure if is the correct approach, to pass the tax as a line item. But according to the Stripe AI assistan it is:

Certainly! Here's how you can add tax to a line item using Stripe.js without automatic tax calculation:

example.js
const stripe = Stripe('your_publishable_key');

const lineItems = [
  {
    price_data: {
      currency: 'usd',
      unit_amount: 2000,
      product_data: {
        name: 'T-shirt',
      },
    },
    quantity: 1,
  },
  {
    price_data: {
      currency: 'usd',
      unit_amount: 200,
      product_data: {
        name: 'Sales Tax',
      },
    },
    quantity: 1,
  }
];

stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: lineItems,
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
}).then(function(session) {
  // Handle the session
});
In this example:

We define two line items in the lineItems array:

The T-shirt priced at $20.00 (2000 cents)
The sales tax as a separate line item, priced at $2.00 (200 cents)
We don't use the automatic_tax parameter, as we're manually adding the tax as a separate line item.

But on docs provided as resources by the AI I couldn't find this approach. But yea seems good enough.

Alright, this is pretty far now.

Regarding the payment methods:

Klarna
Works great and as expected.

AmazonPay
Works great and as expected.

GooglePay
Works great and as expected.

ApplePay
Not tested. I do not have Safari.

Link
Could not test link, since I couldn't log into my account for some reason

PayPal
After confirming the payment I get an error and get sent to the "checkout/{order_id}/order_information" page with the error:

Payment failed at the payment server. Please review your information and try again.

There are still a couple of console errors and I feel like a few parts of code should use existing commerce services instead of "reinventing the wheel" (e.g. the shipping address validation). But generally speaking, this is fairly close!
We will test it in a live environment tommorow and give further feedback.

Sorry, back to "Needs work" regarding PayPal.

Great work for a great feature based on the work done by @vmarchuk! Thanks for the various important finding and fixes!

@vmarchuk will you or your team have a look soon so we don't lose focus here? Would be wonderful to have this feature released soon IMHO!

We are working to land this ASAP.

Appreciate the testing and feedback!

PayPal and Link are NOT supported at this time, as we have not landed Payment Method Types for them. (This needs to land with PaymentElement in order for Express Checkout to be able to support it.)

(If you are able to enable either of these, then that is something that needs to be addressed in this MR.)

After we land the Payment Method Types, we can then enable them in Express Checkout. (PayPal has a proposed MR that is under consideration. Link needs additional work, as it it not only needs a PaymentMethodType, but also some js/UX changes for support. Specifically, Link works with a very simple PaymentMethodType for new payments, but does not work for saved payment methods.)

@tomtech thanks for the feedback! And great to hear, that you guys are on it! Really appreciate the work of your team (and especially by @vmarchuk for working on this issue!).

I disabled support for link and PayPal. We will test it live now and come back to you guys again!

Static patch of the current MR attached.

New patch. Old patch had a bug I introduced, sorry for that.

Alright! Seems to work as expected! We just had 2 test purchases inside a live environment using amazonPay and googlePay. Both worked as expected (Klarna was tested before inside a sandbox environment, which also worked great).

Setting this to "Needs review" for the Centarro people to take a final look at the changes!

Hey @tomtech, just wanted to ask how soon we can expect to get this reviewed / merged?

Also, I couldn't find an issue regarding the missing PayPal / Link PaymentMethodTypes, so I created one here: 🐛 Implement PayPal and Link "PaymentMethodType"s Active . Not sure if you guys plan to implement that yourself? Otherwise, we could also chime in to help implement the PayPal integration, as the "commerce_paypal" Express Checkout Buttons are currently no option for us (see 🐛 Anonymous user can't finish checkout using PayPal Express Checkout, when shipping rates exist Active ).

Thanks for the feedback! 🙂👍