Change creditcard fields

Anyone?

That's one part of spark I would dread messing with. There would be a lot of work involved since spark is sending data to Stripe/Braintree (I've only used Stripe) via ajax, so there would be some js you'd have to fix in addition to the regular form views.

Specifically, what "input fields" are you wanting to change, and why?

The form is generated by Vue.js. So if you want to modify it, you'll need to modify the vue code that builds the form. This could get messy, as Cronix points out. Especially if you ever want to update Laravel Spark.

Perhaps there's a way to prompt the user to input the information you want somewhere else on your site?

@Cronix @hhda I already made lots of changes in the .blade files from Spark. Should be possible I guess for example ohdearapp.com is doing this aswel.

Right now it looks awful :(

The card element is from Stripe Elements https://stripe.com/docs/stripe-js/elements/quickstart.

It's great for securely passing information to Stripe. You can see it happening in Spark in spark/resources/assets/js/mixins/stripe.js. You could recreate the component and override the mixin (or just create a new mixin). The component is in spark/resources/assets/js/settings/subscription/subscribe-stripe.js.

Definitely a pain but not too bad considering all that Spark does for you out of the box.

If you're looking to restyle the credit card field, you can easily extend the createCardElement function in your resources/js/spark-components/auth/register-stripe.js file.

Just grab the "createCardElement" from the mixin file vendor/laravel/spark-aurelius/resources/assets/js/mixins/stripe.js: and override it in your register-stripe.js methods: section.

Here's my full override as an example in my register-stripe.js file.

createCardElement: function createCardElement(container) {
            if (!this.stripe) {
                throw "Invalid Stripe Key/Secret";
            }

            var card = this.stripe.elements().create('card', {
                hideIcon: true,
                hidePostalCode: true,
                style: {
                    base: {
                        '::placeholder': {
                            color: '#cb000d'
                        },
                        fontFamily: 'Whitney, Lato, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"',
                        color: '#ff0084',
                        fontSize: '15px'
                    }
                }
            });
            card.mount(container);
            return card;
        },