Stripe Input-Fields Design / CSS / Layout

[samvara]

How can I change the layout of the Stripe-Formfields which appear with the default Stripe-Integration in Aimeos?

The credit card input-fields are inside an iFrame and currently with a lot of inline-css.

Thank you!

[aimeos]

Customizing the Stripe form is tricky indeed. It might be possible by overwriting that method in your own Stripe service provider and injecting CSS as mentioned in the Stripe docs:

- https://github.com/aimeoscom/ai-payment ... #L344-L432
- https://stripe.com/docs/js/appendix/style

[nowrap]

Thx for your answer.

We started experimenting with the stripe docs "Update an Element":
https://stripe.com/docs/js/element/othe ... cardNumber

And the Style object:
https://stripe.com/docs/js/appendix/sty ... cardNumber

Running this in the browsers dev console worked:

Code: Select all

StripeProvider.elements.getElement('cardNumber').update({showIcon: true});
StripeProvider.elements.getElement('cardNumber').update({style: {base: {fontSize: '17.6px', fontFamily: 'Montserrat,sans-serif', backgroundColor: '#eee'}}});

So, we needed a way to inject this javascript code to the stripe payment site.
After reading a lots of docu we tried first to extend the subparts. But payment doesn't have one.
So we used "client/html/checkout/standard/payment/name = Standard" from
https://aimeos.org/docs/latest/config/c ... rd/#name_3

Our new class extends the Standard class: \Aimeos\Client\Html\Checkout\Standard\Payment\Standard
We created an own body function in order to inject custom javascript to interact with the stripe elements and coying fontSize and Family from the aimeos form labels:

Code: Select all

    /**
     * Returns the HTML code for insertion into the body.
     *
     * @param string $uid Unique identifier for the output if the content is placed more than once on the same page
     * @return string HTML code
     */
    public function body( string $uid = '' ) : string
    {
        // https://stripe.com/docs/js/elements_object/create_element?type=cardNumber
        // https://stripe.com/docs/js/appendix/style?type=cardNumber

        return '
<script type="text/javascript" nonce="' . $this->context()->nonce() . '">
    document.addEventListener("DOMContentLoaded", function() {
        console.log("loaded", StripeProvider);

        setTimeout(function() {
            console.log("waited", StripeProvider);

            const fontSize = window.getComputedStyle(document.querySelector("label[for=\'process-payment.cardno\']")).fontSize;
            const fontFamily = window.getComputedStyle(document.querySelector("label[for=\'process-payment.cardno\']")).fontFamily;
            const backgroundColor = "#eee";

            console.log("waited", fontSize, fontFamily, backgroundColor);

            StripeProvider.elements.getElement("cardNumber").update({showIcon: true, style: {base: {fontSize: fontSize, fontFamily: fontFamily, backgroundColor: backgroundColor}}});
            StripeProvider.elements.getElement("cardExpiry").update({style: {base: {fontSize: fontSize, fontFamily: fontFamily, backgroundColor: backgroundColor}}});
            StripeProvider.elements.getElement("cardCvc").update({style: {base: {fontSize: fontSize, fontFamily: fontFamily, backgroundColor: backgroundColor}}});

        }, 250);
    });
</script>
        ';
    }

It also needed a bit CSS to match the labels:

Code: Select all

#process-payment\.cardno,
#process-payment\.expiry,
#process-payment\.cvv {
    margin: 0.5rem 0 !important;
}

But now it looks far more better than the vanilla ominpay/stripe form inputs:

Screenshot.png (19.11 KiB) Viewed 2593 times

Regards
.nowrap

[nowrap]

The body-method needs an update because elsewise it's hides the cancel and submit button on the address step and it prevents an javascript error:

Code: Select all

    /**
     * Returns the HTML code for insertion into the body.
     *
     * @param string $uid Unique identifier for the output if the content is placed more than once on the same page
     * @return string HTML code
     */
    public function body( string $uid = '' ) : string
    {
        $html = parent::body($uid);

        $view = $this->view();
        $step = $view->get( 'standardStepActive' );
        #dump($step);

        if ($step == 'process') {

            // https://stripe.com/docs/js/elements_object/create_element?type=cardNumber
            // https://stripe.com/docs/js/appendix/style?type=cardNumber

            $html .= '
<script type="text/javascript" nonce="' . $this->context()->nonce() . '">
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof StripeProvider === "undefined") {
            console.warn("Stripe::notLoaded");

        } else {
            console.log("Strip::loaded", StripeProvider);

            setTimeout(function() {
                console.log("Stripe::waited", StripeProvider);

                const fontSize = window.getComputedStyle(document.querySelector("label[for=\'process-payment.cardno\']")).fontSize;
                const fontFamily = window.getComputedStyle(document.querySelector("label[for=\'process-payment.cardno\']")).fontFamily;
                const backgroundColor = "#eee";

                console.log("Stripe::waited", fontSize, fontFamily, backgroundColor);

                StripeProvider.elements.getElement("cardNumber").update({showIcon: true, style: {base: {fontSize: fontSize, fontFamily: fontFamily, backgroundColor: backgroundColor}}});
                StripeProvider.elements.getElement("cardExpiry").update({style: {base: {fontSize: fontSize, fontFamily: fontFamily, backgroundColor: backgroundColor}}});
                StripeProvider.elements.getElement("cardCvc").update({style: {base: {fontSize: fontSize, fontFamily: fontFamily, backgroundColor: backgroundColor}}});

            }, 250);
        }
    });
</script>
            ';
        }

        return $html;
    }

A step check is added (php) and a typeof check (javascript).

Regards
.nowrap