Prefill the postal code for Stripe Elements

This commit is contained in:
Benjamin Beganović 2021-05-10 13:01:59 +02:00
parent 3764389e04
commit 98fa636e26
5 changed files with 26 additions and 8 deletions

2
public/css/app.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"/js/app.js": "/js/app.js?id=696e8203d5e8e7cf5ff5",
"/css/app.css": "/css/app.css?id=2163e6d43930f4ad9253",
"/css/app.css": "/css/app.css?id=941462bb9c0bd274bc70",
"/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=a09bb529b8e1826f13b4",
"/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=8ce8955ba775ea5f47d1",
"/js/clients/linkify-urls.js": "/js/clients/linkify-urls.js?id=0dc8c34010d09195d2f7",
@ -10,7 +10,7 @@
"/js/clients/payments/checkout-credit-card.js": "/js/clients/payments/checkout-credit-card.js?id=98e406fa8e4db0e93427",
"/js/clients/payments/stripe-ach.js": "/js/clients/payments/stripe-ach.js?id=76d8ba6a814b3015e359",
"/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=7a4ce306366be98be5f7",
"/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=2c828298b04fe30a4fe7",
"/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=5c762e4a21bdbce9c0c0",
"/js/clients/payments/stripe-sofort.js": "/js/clients/payments/stripe-sofort.js?id=282f5d57f1c1efe8f896",
"/js/clients/quotes/action-selectors.js": "/js/clients/quotes/action-selectors.js?id=1b8f9325aa6e8595e7fa",
"/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12",

View File

@ -19,7 +19,7 @@ class StripeCreditCard {
setupStripe() {
this.stripe = Stripe(this.key);
if(this.stripeConnect)
if (this.stripeConnect)
this.stripe.stripeAccount = this.stripeConnect;
this.elements = this.stripe.elements();
@ -28,7 +28,11 @@ class StripeCreditCard {
}
createElement() {
this.cardElement = this.elements.create('card');
this.cardElement = this.elements.create('card', {
value: {
postalCode: document.querySelector('meta[name=client-postal-code]').content,
}
});
return this;
}
@ -206,7 +210,11 @@ const secret =
const onlyAuthorization =
document.querySelector('meta[name="only-authorization"]').content ?? '';
const stripeConnect =
const stripeConnect =
document.querySelector('meta[name="stripe-account-id"]').content;
new StripeCreditCard(publishableKey, secret, onlyAuthorization, stripeConnect).handle();
let s = new StripeCreditCard(publishableKey, secret, onlyAuthorization, stripeConnect);
s.handle();
Livewire.on('passed-required-fields-check', () => s.handle());

View File

@ -5,6 +5,8 @@
<meta name="stripe-account-id" content="{{ $gateway->company_gateway->getConfigField('account_id') }}">
<meta name="stripe-secret" content="{{ $intent->client_secret }}">
<meta name="only-authorization" content="">
<meta name="client-postal-code" content="{{ $client->postal_code ?? '' }}">
@endsection
@section('gateway_content')
@ -58,6 +60,14 @@
@endsection
@section('gateway_footer')
<script>
Livewire.on('passed-required-fields-check', (event) => {
if (event.hasOwnProperty('client_postal_code')) {
document.querySelector('meta[name=client-postal-code]').content = event.client_postal_code;
}
});
</script>
<script src="https://js.stripe.com/v3/"></script>
<script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
@endsection