Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Lars-Janssen's avatar

Changing card nothing is added?

Hi,

When I want to change the default card that Spark is making:

var base = require('settings/subscription/subscribe-stripe');

Vue.component('spark-subscribe-stripe', {
    mixins: [base],

    methods: {
        /**
         * Create a Stripe Card Element.
         */
        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: '#aab7c4'
                        },
                        fontFamily: '  \'Whitney A\',\n' +
                        '            \'Whitney B\',\n' +
                        '            \'-apple-system\',\n' +
                        '            \'BlinkMacSystemFont\',\n' +
                        '            \'Segoe UI\',\n' +
                        '            \'Roboto\',\n' +
                        '            \'Oxygen\',\n' +
                        '            \'Ubuntu\',\n' +
                        '            \'Cantarell\',\n' +
                        '            \'Fira Sans\',\n' +
                        '            \'Droid Sans\',\n' +
                        '            \'Helvetica Neue\'',
                        color: '#606f7b',
                        fontSize: '15px',
                        background: 'red',
                        padding: '20px'
                    }
                }
            });

            card.mount(container);

            return card;
        }
    },
});

Nothing happens? I see no background color and no padding. But the font family does change!

What am I doing wrong here?

0 likes
0 replies

Please or to participate in this conversation.