Stripe Input-Fields Design / CSS / Layout
Forum rules
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
Stripe Input-Fields Design / CSS / Layout
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!
The credit card input-fields are inside an iFrame and currently with a lot of inline-css.
Thank you!
Re: Stripe Input-Fields Design / CSS / Layout
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
- https://github.com/aimeoscom/ai-payment ... #L344-L432
- https://stripe.com/docs/js/appendix/style
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, give us a star
If you like Aimeos, give us a star
Re: Stripe Input-Fields Design / CSS / Layout
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:
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:
It also needed a bit CSS to match the labels:
But now it looks far more better than the vanilla ominpay/stripe form inputs:
Regards
.nowrap
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'}}});
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>
';
}
Code: Select all
#process-payment\.cardno,
#process-payment\.expiry,
#process-payment\.cvv {
margin: 0.5rem 0 !important;
}
.nowrap
Re: Stripe Input-Fields Design / CSS / Layout
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:
A step check is added (php) and a typeof check (javascript).
Regards
.nowrap
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;
}
Regards
.nowrap