Merge pull request #5656 from beganovich/v5-1005-stripe-hiding-cvv

(v5) Prefill the postal code with Stripe Elements
This commit is contained in:
Benjamin Beganović 2021-05-10 14:54:21 +02:00 committed by GitHub
commit 3fb202be2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 7 deletions

View File

@ -88,7 +88,9 @@ class RequiredClientInfo extends Component
} }
if ($this->updateClientDetails($data)) { if ($this->updateClientDetails($data)) {
$this->emit('passed-required-fields-check'); $this->emit('passed-required-fields-check', [
'client_postal_code' => $this->contact->client->postal_code,
]);
return true; return true;
} }

File diff suppressed because one or more lines are too long

View File

@ -10,7 +10,7 @@
"/js/clients/payments/checkout-credit-card.js": "/js/clients/payments/checkout-credit-card.js?id=98e406fa8e4db0e93427", "/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-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-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/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/action-selectors.js": "/js/clients/quotes/action-selectors.js?id=1b8f9325aa6e8595e7fa",
"/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12", "/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12",

View File

@ -28,7 +28,11 @@ class StripeCreditCard {
} }
createElement() { 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; return this;
} }
@ -209,4 +213,8 @@ const onlyAuthorization =
const stripeConnect = const stripeConnect =
document.querySelector('meta[name="stripe-account-id"]').content; 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-account-id" content="{{ $gateway->company_gateway->getConfigField('account_id') }}">
<meta name="stripe-secret" content="{{ $intent->client_secret }}"> <meta name="stripe-secret" content="{{ $intent->client_secret }}">
<meta name="only-authorization" content=""> <meta name="only-authorization" content="">
<meta name="client-postal-code" content="{{ $client->postal_code ?? '' }}">
@endsection @endsection
@section('gateway_content') @section('gateway_content')
@ -58,6 +60,14 @@
@endsection @endsection
@section('gateway_footer') @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="https://js.stripe.com/v3/"></script>
<script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script> <script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
@endsection @endsection