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
