Skip to content

Commit 71b5845

Browse files
dpaun1985dpaun1985
authored
add payment method on checkout form (#2382)
1 parent 3769e49 commit 71b5845

File tree

8 files changed

+159
-10
lines changed

8 files changed

+159
-10
lines changed

‎changelog.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
= 6.5.0 - 2022-xx-xx =
44
* Add - Stripe Link: Add beta headers for Stripe server requests
55
* Add - Stripe Link payment method option in admin
6+
* Add - Stripe Link payment method on checkout form
67

78
= 6.4.3 - 2022-06-30 =
89
* Fix - Replace unnecessary throws with empty string when keys are invalid.

‎client/api/index.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,12 @@ export default class WCStripeAPI {
6767
const isStripeLinkEnabled =
6868
undefined !== paymentMethodsConfig.card &&
6969
undefined !== paymentMethodsConfig.link;
70-
7170
if ( ! this.stripe ) {
7271
if ( isUPEEnabled ) {
7372
let betas = [ 'payment_element_beta_1' ];
7473
if ( isStripeLinkEnabled ) {
75-
betas = betas.concat( [
76-
'link_autofill_modal_beta_1',
77-
'link_beta_2',
78-
] );
74+
betas = betas.concat( [ 'link_autofill_modal_beta_1' ] );
7975
}
80-
8176
this.stripe = this.createStripe( key, locale, betas );
8277
} else {
8378
this.stripe = this.createStripe( key, locale );
@@ -93,10 +88,9 @@ export default class WCStripeAPI {
9388
options.betas = betas;
9489
}
9590

96-
if ( betas.includes( 'link_beta_2' ) ) {
91+
if ( betas.includes( 'link_autofill_modal_beta_1' ) ) {
9792
options.apiVersion = '2020-08-27;link_beta=v1';
9893
}
99-
10094
return new Stripe( key, options );
10195
}
10296

‎client/classic/upe/index.js

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import jQuery from 'jquery';
22
import WCStripeAPI from '../../api';
33
import { getStripeServerData, getUPETerms } from '../../stripe-utils';
44
import { getFontRulesFromPage, getAppearance } from '../../styles/upe';
5+
import enableStripeLinkPaymentMethod from '../../stripe-link';
56
import { legacyHashchangeHandler } from './legacy-support';
67
import './style.scss';
78

@@ -10,7 +11,9 @@ jQuery( function ( $ ) {
1011
const isUPEEnabled = getStripeServerData()?.isUPEEnabled;
1112
const paymentMethodsConfig = getStripeServerData()?.paymentMethodsConfig;
1213
const enabledBillingFields = getStripeServerData()?.enabledBillingFields;
13-
14+
const isStripeLinkEnabled =
15+
undefined !== paymentMethodsConfig.card &&
16+
undefined !== paymentMethodsConfig.link;
1417
if ( ! key ) {
1518
// If no configuration is present, probably this is not the checkout page.
1619
return;
@@ -93,6 +96,7 @@ jQuery( function ( $ ) {
9396
const elements = api.getStripe().elements( {
9497
fonts: getFontRulesFromPage(),
9598
} );
99+
96100
const sepaElementsOptions =
97101
getStripeServerData()?.sepaElementsOptions ?? {};
98102
const iban = elements.create( 'iban', sepaElementsOptions );
@@ -308,7 +312,6 @@ jQuery( function ( $ ) {
308312
hiddenElementsForUPE.cleanup();
309313
api.saveUPEAppearance( appearance );
310314
}
311-
312315
const businessName = getStripeServerData()?.accountDescriptor;
313316
const upeSettings = {
314317
clientSecret,
@@ -321,6 +324,36 @@ jQuery( function ( $ ) {
321324
};
322325
}
323326

327+
if ( isStripeLinkEnabled ) {
328+
enableStripeLinkPaymentMethod( {
329+
api,
330+
elements,
331+
emailId: 'billing_email',
332+
complete_billing: true,
333+
complete_shipping: () => {
334+
return ! document.getElementById(
335+
'ship-to-different-address-checkbox'
336+
).checked;
337+
},
338+
shipping_fields: {
339+
line1: 'shipping_address_1',
340+
line2: 'shipping_address_2',
341+
city: 'shipping_city',
342+
state: 'shipping_state',
343+
postal_code: 'shipping_postcode',
344+
country: 'shipping_country',
345+
},
346+
billing_fields: {
347+
line1: 'billing_address_1',
348+
line2: 'billing_address_2',
349+
city: 'billing_city',
350+
state: 'billing_state',
351+
postal_code: 'billing_postcode',
352+
country: 'billing_country',
353+
},
354+
} );
355+
}
356+
324357
upeElement = elements.create( 'payment', upeSettings );
325358
upeElement.mount( '#wc-stripe-upe-element' );
326359

‎client/stripe-link/index.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const showLinkButton = ( linkAutofill ) => {
2+
// Display StripeLink button if email field is prefilled.
3+
if ( jQuery( '#billing_email' ).val() !== '' ) {
4+
const linkButtonTop =
5+
jQuery( '#billing_email' ).position().top +
6+
( jQuery( '#billing_email' ).outerHeight() - 40 ) / 2;
7+
jQuery( '.wcpay-stripelink-modal-trigger' ).show();
8+
jQuery( '.wcpay-stripelink-modal-trigger' ).css(
9+
'top',
10+
linkButtonTop + 'px'
11+
);
12+
}
13+
14+
// Handle StripeLink button click.
15+
jQuery( '.wcpay-stripelink-modal-trigger' ).on( 'click', ( event ) => {
16+
event.preventDefault();
17+
// Trigger modal.
18+
linkAutofill.launch( { email: jQuery( '#billing_email' ).val() } );
19+
} );
20+
};
21+
22+
const enableStripeLinkPaymentMethod = ( options ) => {
23+
if ( ! document.getElementById( options.emailId ) ) {
24+
return;
25+
}
26+
const api = options.api;
27+
const linkAutofill = api.getStripe().linkAutofillModal( options.elements );
28+
29+
document
30+
.getElementById( options.emailId )
31+
.addEventListener( 'keyup', ( event ) => {
32+
linkAutofill.launch( { email: event.target.value } );
33+
} );
34+
35+
const showButton = options.show_button
36+
? options.show_button
37+
: showLinkButton;
38+
showButton( linkAutofill );
39+
40+
linkAutofill.on( 'autofill', ( event ) => {
41+
const { billingAddress, shippingAddress } = event.value;
42+
const fillWith = options.fill_field_method
43+
? options.fill_field_method
44+
: ( address, nodeId, key ) => {
45+
if ( document.getElementById( nodeId ) !== null ) {
46+
document.getElementById( nodeId ).value =
47+
address.address[ key ];
48+
}
49+
};
50+
51+
if ( options.complete_shipping ) {
52+
fillWith( shippingAddress, options.shipping_fields.line1, 'line1' );
53+
fillWith( shippingAddress, options.shipping_fields.line2, 'line2' );
54+
fillWith( shippingAddress, options.shipping_fields.city, 'city' );
55+
fillWith( shippingAddress, options.shipping_fields.state, 'state' );
56+
fillWith(
57+
shippingAddress,
58+
options.shipping_fields.postal_code,
59+
'postal_code'
60+
);
61+
fillWith(
62+
shippingAddress,
63+
options.shipping_fields.country,
64+
'country'
65+
);
66+
}
67+
if ( options.complete_billing ) {
68+
fillWith( billingAddress, options.billing_fields.line1, 'line1' );
69+
fillWith( billingAddress, options.billing_fields.line2, 'line2' );
70+
fillWith( billingAddress, options.billing_fields.city, 'city' );
71+
fillWith( billingAddress, options.billing_fields.state, 'state' );
72+
fillWith(
73+
billingAddress,
74+
options.billing_fields.postal_code,
75+
'postal_code'
76+
);
77+
fillWith(
78+
billingAddress,
79+
options.billing_fields.country,
80+
'country'
81+
);
82+
}
83+
} );
84+
};
85+
86+
export default enableStripeLinkPaymentMethod;

‎client/styles/upe/__tests__/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,17 @@ describe( 'Getting styles for automated theming', () => {
168168
'.TabIcon--selected:hover': {
169169
color: 'rgb(255, 255, 255)',
170170
},
171+
'.CheckboxInput': {
172+
backgroundColor: 'var(--colorBackground)',
173+
borderRadius: 'min(5px, var(--borderRadius))',
174+
transition:
175+
'background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease',
176+
border: '1px solid var(--p-colorBackgroundDeemphasize10)',
177+
},
178+
'.CheckboxInput--checked': {
179+
backgroundColor: 'var(--colorPrimary) ',
180+
borderColor: 'var(--colorPrimary)',
181+
},
171182
},
172183
} );
173184
} );

‎client/styles/upe/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,17 @@ export const getAppearance = () => {
121121
'.TabIcon:hover': tabIconHoverRules,
122122
'.TabIcon--selected': selectedTabIconRules,
123123
'.TabIcon--selected:hover': selectedTabIconHoverRules,
124+
'.CheckboxInput': {
125+
backgroundColor: 'var(--colorBackground)',
126+
borderRadius: 'min(5px, var(--borderRadius))',
127+
transition:
128+
'background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease',
129+
border: '1px solid var(--p-colorBackgroundDeemphasize10)',
130+
},
131+
'.CheckboxInput--checked': {
132+
backgroundColor: 'var(--colorPrimary) ',
133+
borderColor: 'var(--colorPrimary)',
134+
},
124135
},
125136
};
126137

‎includes/payment-methods/class-wc-stripe-upe-payment-gateway.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -552,6 +552,18 @@ public function process_payment( $order_id, $retry = true, $force_save_source =
552552
if ( '' !== $selected_upe_payment_type ) {
553553
// Only update the payment_method_types if we have a reference to the payment type the customer selected.
554554
$request['payment_method_types'] = [ $selected_upe_payment_type ];
555+
if ( WC_Stripe_UPE_Payment_Method_CC::STRIPE_ID === $selected_upe_payment_type ) {
556+
if ( in_array(
557+
WC_Stripe_UPE_Payment_Method_Link::STRIPE_ID,
558+
$this->get_upe_enabled_payment_method_ids(),
559+
true
560+
) ) {
561+
$request['payment_method_types'] = [
562+
WC_Stripe_UPE_Payment_Method_CC::STRIPE_ID,
563+
WC_Stripe_UPE_Payment_Method_Link::STRIPE_ID,
564+
];
565+
}
566+
}
555567
$this->set_payment_method_title_for_order( $order, $selected_upe_payment_type );
556568
if ( ! $this->payment_methods[ $selected_upe_payment_type ]->is_allowed_on_country( $order->get_billing_country() ) ) {
557569
throw new \Exception( __( 'This payment method is not available on the selected country', 'woocommerce-gateway-stripe' ) );

‎readme.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,5 +131,6 @@ If you get stuck, you can ask for help in the Plugin Forum.
131131
= 6.5.0 - 2022-xx-xx =
132132
* Add - Stripe Link payment method option in admin
133133
* Add - Stripe Link: Add beta headers for Stripe server requests
134+
* Add - Stripe Link payment method on checkout form
134135

135136
[See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).

0 commit comments

Comments
 (0)