Request: Add integration with Stripe Elements

[Vince Mitchell]

It would be really awesome if we could integrate this UI with Stripe Elements.

I'm adding this issue in case someone else picks it up before I can attempt it.

[Duncan McClean]

Miguel Piedraftia actually managed to do this yesterday and he made a write up on it: https://miguelpiedrafita.com/stripe-elements-card/

[Deleted user]

It would be really awesome if we could integrate this UI with Stripe Elements.

I'm adding this issue in case someone else picks it up before I can attempt it.

I too would find this useful.

[Vince Mitchell]

There was a comment on the post by @m1guelpf asking about his source code, but no answer yet. I'll comment here if I get it working

[Miguel Piedrafita]

@vmitchell85 As I mentioned on the comments I'll try to decouple the component from the Sitesauce this week and throw it in a repo, but don't have time today unfortunately :)

[Vince Mitchell]

@m1guelpf sweet, it didn’t notify me of your comment since it was in a sub-comment... I might give it a shot anyway... thanks

[Deleted user]

Any updates on this?

[Vince Mitchell]

Sorry @sblfc I haven't gotten around to it...

[Piket564]

@vmitchell85 @sblfc I've managed to insert Stripe with /api/v2

EDIT

But i think that

Miguel Piedraftia actually managed to do this yesterday and he made a write up on it: https://miguelpiedrafita.com/stripe-elements-card/

is better, because it use /api/v3 with Stripe Credit Card checker.
The code belove from the blog is the Object that stripe use to create the card element, and i think that the style/html is the same as this repo.

const cardNumber = elements.create('cardNumber', {
    classes: {
        base: 'card-item__number',
        focus: 'card-item__focus',
    },
    style: {
        base: {
            color: '#ffffff',
            lineHeight: '1',
            fontFamily: '"Source Code Pro", monospace',
            fontSmoothing: 'antialiased',
            fontSize: '27px',
            fontWeight: "500",
            '::placeholder': {
                color: '#cbd5e0'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
})

[Dominik Nguyen]

I don't think it's actually possible to do with Stripe.js v3. What is possible is what m1guelpf had done and that's to place the inputs inside the card. However that's far from optimal imho :(

[Piket564]

I don't think it's actually possible to do with Stripe.js v3. What is possible is what m1guelpf had done and that's to place the inputs inside the card. However that's far from optimal imho :(

Yes, Stripe provide hi own input for security concern, they do not limit the CSS though, i've tried what m1guelpf had done, and yes is a little tricky but it works...

[callsecfrance]

Hi everyone,

Any update?

[Axel Gustav]

I gave up on this, it's a nice visual but not worth the effort to me. It's really neat but I'm gonna ship more features instead :)