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/