Implement Stripe's "Payment Element" over the "Card Element"

#1

@clavaque Could you please implement the newer Stripe “Payment Element” instead of only the legacy “Card Element”

Stripe’s migration guide is here:
https://docs.stripe.com/payments/payment-element/migration?integration-path=one-time

Here’s a comparison between the two:
https://docs.stripe.com/payments/payment-card-element-comparison

The Payment Element is now the recommended implementation by Stripe, allowing the use of Apple Pay and Google Pay, and other payment methods to appear in the JS-loaded payment section.

It also works better on mobiles, because instead of having one field that combines the credit card number, expiration, and CVC code, it’s now broken into three separate fields: card number, expiration, and CVC.

This formatting fits better on mobile devices, and matches the modern checkout experience you’ll find on sites such as Shopify, Lemonsqueezy, WooCommerce, and other WordPress membership plugins, all which use the up-to-date Stripe Payment Element.

Has anyone successfully implemented this on their own?

Thanks.

3 Likes
#2

That would be great!

#3

I’m looking into this :slight_smile:

#4

Hello! This would be an awesome implementation!

@clavaque - I’d be happy for my developer (and me!) to modify the appropriate files within my installation to enable this.

Would you be able to let us know which files and/or mechanisms require modification for this to function?

#5

In fact, does anyone have any clue as to which files we’d need to modify, for this to function? It’d be great to renew the functionality prior to Christmas and would be a welcome boost for Customer UX!

#6

I believe these are the only two files you’ll need to update:

/wp-content/plugins/s2member-pro/src/includes/templates/forms/stripe-billing-div.php
/wp-content/plugins/s2member-pro/src/includes/separates/gateways/stripe/stripe.js

I was able to modify these two files to split the single CardElement field into three separate input fields—credit card number, expiration date, and security code—similar to what’s shown on this tutorial:

(Note: I didn’t use the above tutorial to make these changes. I’m just referencing it for the before and after images)

Here’s a proper guide:

So, instead of creating a single card element via JavaScript (which is one horizontal input field that dynamically combines the CC number, expiration, and CVC fields into one), you’re creating three separate elements—cardNumber, cardExpiry, and cardCvc—that’ll render in the browser as three separate input fields that you can position wherever you want in the HTML.

The problematic part is I’ll have to modify the above files again when s2member upgrades, as the upgrade will overwrite them. But it doesn’t appear that these two files and s2member in general change often, so no big deal.

I would post the code I changed here, but since these are “pro” files (i.e., not the free version), I don’t know if @clavaque would approve.

@clavaque I could provide you the two before and after files that I edited to get this to work if you’d like to see them.

Unfortunately, I wasn’t able to get the PaymentElement to work following Stripe’s official guide:
https://docs.stripe.com/payments/payment-element/migration

At best, I was able to get the full PaymentElement to render in the browser, but actual transactions failed. In the meantime, I’m content with the split fields CardElement as a reasonable middle ground.

1 Like