Request: Add integration with Stripe Elements

[vmitchell85]

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.

[duncanmcclean]

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

[ghost]

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.

[vmitchell85]

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

[m1guelpf]

@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 :)

[vmitchell85]

@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

[ghost]

Any updates on this?

[vmitchell85]

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-wbz]

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?

[AxelTheGerman]

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 :)