Stripe elements styling

I am still support my product, but in this case, i don't have solution to change structure of Stripe Card Elements Form.
Dam

There is a solution. Stripe has told me and so has this user, you can change it. We cannot. Only you can help us.

What did Stripe told you?
Dam

They told me the developer has to change the way it looks. Did you look at the other guys link to how to change it?

I just want some space around this. The fields are squished right on the other part of the form. Just tell us how to add some margin so they are at least not almost overlapping.

Dave, to add padding you can do like
```
.jd-container .StripeElement {
poadding: 1rem;
}
```

The code to create individual elements is as so...
HTML
```
@extends('layouts.app')

@section('content')
@include('auth.registration-steps', )
<div class="row justify-content-center">
<div class="col-md-8">
<h2>{{ __('Payment') }}</h2>
<form method="POST" action="{{ route('subscriptions.store') }}">
<div class="card">
<div class="card-body">
<h3 class="text-center mb-3">Annual Membership</h3>
@csrf
<input type="hidden" name="paymentMethod" id="paymentMethod" value="">
<input type="hidden" name="subscriber" id="subscriber" value="{{ $subscriber->id }}">
@include('users._partials.price-options')

<hr>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="stripe-elements mb-3">
{{-- <h5>Card details</h5>--}}
<div class="form-group">
<label for="card-holder-name">Card holder name</label>
<input type="text" name="card-holder-name" id="card-holder-name"
placeholder="Name on card" class="field"
value="{{ $subscriber->user->name }}" required>
</div>

<div class="form-group">
<label for="card-number">Card number</label>
<div id="card-number" class="field empty"></div>
</div>

<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="card-expiry">Expiry</label>
<div id="card-expiry" class="field empty"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="card-cvc">Security code</label>
<div id="card-cvc" class="field empty"></div>
</div>
</div>
</div>
</div>
<img src="{{ asset('images/card-logos-small.png') }}" alt="">
</div>
</div>
{{-- <div class="row justify-content-center">--}}
{{-- <div class="col d-flex justify-content-center">--}}
{{-- <img src="{{ asset('images/card-logos.png') }}" alt="" style="max-width:300px;">--}}
{{-- </div>--}}
{{-- </div>--}}
</div>
</div>
<div class="form-group mt-5">
<div class="text-center">
<button type="button" class="btn btn-primary btn-lg" id="stripe-submit-button"
data-secret="{{ $intent->client_secret }}" data-customer=""
data-stripe-key="{{ config('services.stripe.key') }}">
{{ __('Pay now') }}
</button>
</div>
</div>
</form>
</div>
</div>
@endsection

```
JS
```
import Loader from "./Loader";

class StripeForm {
constructor() {
const self = this;
this.cardButton = document.getElementById('stripe-submit-button');
const stripeKey = process.env.MIX_STRIPE_KEY;

if (this.cardButton) {
const stripe = Stripe(this.cardButton.dataset.stripeKey);

const elements = stripe.elements();

// const cardElement = elements.create('card');
// cardElement.mount('#card-element');

let elementStyles = {
base: {
// color: '#32325d',
// fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
// '::placeholder': {
// color: '#aab7c4'
// }
},
// invalid: {
// color: '#fa755a',
// iconColor: '#fa755a'
// }
};

var elementClasses = {
focus: 'focus',
empty: 'empty',
invalid: 'invalid',
};

var cardNumber = elements.create('cardNumber', {
style: elementStyles,
classes: elementClasses,
});
cardNumber.mount('#card-number');

var cardExpiry = elements.create('cardExpiry', {
style: elementStyles,
classes: elementClasses,
});
cardExpiry.mount('#card-expiry');

var cardCvc = elements.create('cardCvc', {
style: elementStyles,
classes: elementClasses,
});
cardCvc.mount('#card-cvc');

const cardHolderName = document.getElementById('card-holder-name');

this.cardButton.addEventListener('click', async (e) => {
this.cardButton.disabled = true;
if (!cardHolderName.value) {
alert("The Card holder name field is required!");
return false;
}
Loader.loading();

// var el = elements.getElement('cardNumber');
// console.log(el);
var cardElement = {
exp_month: '',
exp_year: '',
number: '',
cvc: '',
};
// console.log(cardElement);
const {paymentMethod, error} = await stripe.createPaymentMethod(
'card', cardNumber, {
billing_details: {name: cardHolderName.value}
}
);

if (error) {
// Display "error.message" to the user...
console.log(error);
Loader.loading(false);
alert(error.message);
this.cardButton.disabled = false;
} else {
var paymentMethodInput = document.getElementById('paymentMethod');
paymentMethodInput.value = JSON.stringify(paymentMethod);
this.cardButton.form.submit();
// The card has been verified successfully...
}
});
}
}

checkReady() {
console.log('Stripe elements mounted');
}
}

export default StripeForm;
```

This is from a Laravel app so will need to be adjusted to fit but hopefully you can work it out from that and the documentation links I have provided

You can send the link of your Donation form here, i can debug the CSS and let you know the custom CSS to push the Stripe Card Elements form for you.
Dam

Dam, why can't you fix this for all of us to have a better looking form?

Hi
1. It doesn't happen on all sites, so i won't add it into core of Joom Donation. For example, on Joom Donation demo site: joomdonationdemo.com/donation/donate/donate-single-campaign , you won't see the same CSS issue with your site.
2. I just need to see the link of your Donation form, no need Super admin account.
Dam

mauekay.org/donate

Go to Joom Donation Configuration -> Tab: Custom CSS and add
#stripe-card-form
{
padding-top:20px !important;
}
Good luck
Dam