Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
refactor cc so subscription handling is done in custom hook (makes co…
Browse files Browse the repository at this point in the history 
…de a bit easier to read).
  • Loading branch information
@nerrad
nerrad committed Mar 23, 2020
1 parent 7ef1a8f commit 278d58d
Showing 1 changed file with 130 additions and 101 deletions.
231 changes: 130 additions & 101 deletions assets/js/payment-methods-demo/payment-methods/stripe/payment-method.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,127 @@ const CardElements = ( { onChange, style, classes } ) => {
);
};

const useStripeCheckoutSubscriptions = (
eventRegistration,
paymentStatus,
billing,
savedPaymentMethodToken,
sourceId,
setSourceId,
shouldSavePayment,
stripe
) => {
const onStripeError = useRef( () => {} );
// hook into and register callbacks for events.
useEffect( () => {
onStripeError.current = ( event ) => {
const type = event.error.type;
const code = event.error.code || '';
let message = getErrorMessageForTypeAndCode( type, code );
message = message || event.error.message;
paymentStatus.setPaymentStatus().error( message );

// @todo we'll want to do inline invalidation errors for any element
// inputs
return {};
};
const createSource = async ( stripeBilling ) => {
return await stripe.createSource( stripeBilling );
};
const onSubmit = async () => {
console.log( 'submitting' );
paymentStatus.setPaymentStatus().processing();
const { billingData } = billing;
// use saved token if it's set.
if ( savedPaymentMethodToken !== 0 || sourceId !== 0 ) {
const tokenSlice =
savedPaymentMethodToken !== 0
? {
savedPaymentMethodToken,
}
: {
sourceId,
};
paymentStatus.setPaymentStatus().success( billingData, {
paymentMethod: PAYMENT_METHOD_NAME,
paymentRequestType: 'cc',
...tokenSlice,
shouldSavePayment,
} );
return true;
}
const stripeBilling = {
address: {
line1: billingData.address_1,
line2: billingData.address_2,
city: billingData.city,
state: billingData.state,
postal_code: billingData.postcode,
country: billingData.country,
},
};
if ( billingData.phone ) {
stripeBilling.phone = billingData.phone;
}
if ( billingData.email ) {
stripeBilling.email = billingData.email;
}
if ( billingData.first_name || billingData.last_name ) {
stripeBilling.name = `${ billingData.first_name } ${ billingData.last_name }`;
}

// const response = await createSource( stripeBilling );
// if ( response.error ) {
// return onStripeError.current( response );
// }
// paymentStatus.setPaymentStatus().success( billingData, {
// sourceId: response.source.id,
// paymentMethod: PAYMENT_METHOD_NAME,
// paymentRequestType: 'cc',
// shouldSavePayment,
// } );
// setSourceId( response.source.id );
return true;
};
const onComplete = () => {
paymentStatus.setPaymentStatus().completed();
};
const onError = () => {
paymentStatus.setPaymentStatus().started();
};
// @todo Right now all the registered callbacks will go stale, so we need
// either implement useRef or make sure functions being used from these
// callbacks don't change so we can add them as dependencies.
// validation and stripe processing (get source etc).
const unsubscribeProcessing = eventRegistration.onCheckoutProcessing(
onSubmit
);
const unsubscribeCheckoutComplete = eventRegistration.onCheckoutCompleteSuccess(
onComplete
);
const unsubscribeCheckoutCompleteError = eventRegistration.onCheckoutCompleteError(
onError
);
return () => {
unsubscribeProcessing();
unsubscribeCheckoutComplete();
unsubscribeCheckoutCompleteError();
};
}, [
eventRegistration.onCheckoutProcessing,
eventRegistration.onCheckoutCompleteSuccess,
eventRegistration.onCheckoutCompleteError,
paymentStatus.setPaymentStatus,
stripe,
savedPaymentMethodToken,
sourceId,
billing.billingData,
setSourceId,
shouldSavePayment,
] );
return onStripeError.current;
};

// @todo add intents?

/**
Expand All @@ -176,17 +297,15 @@ const CreditCardComponent = ( {
'cc',
PAYMENT_METHOD_NAME
);
const onStripeError = ( event ) => {
const type = event.error.type;
const code = event.error.code || '';
let message = getErrorMessageForTypeAndCode( type, code );
message = message || event.error.message;
paymentStatus.setPaymentStatus().error( message );

// @todo we'll want to do inline invalidation errors for any element
// inputs
return {};
};
const onStripeError = useStripeCheckoutSubscriptions(
eventRegistration,
paymentStatus,
billing,
savedPaymentMethodToken,
sourceId,
shouldSavePayment,
stripe
);
const updateCardBrand = ( brand ) => {
// @todo this updates the card brand logo with non-inline CC forms
// (see function in stripe.js)
Expand Down Expand Up @@ -214,96 +333,6 @@ const CreditCardComponent = ( {
/>
);

const createSource = async ( stripeBilling ) => {
return await stripe.createSource( stripeBilling );
};
const onSubmit = async () => {
console.log( 'submitting' );
paymentStatus.setPaymentStatus().processing();
const { billingData } = billing;
// use saved token if it's set.
if ( savedPaymentMethodToken !== 0 || sourceId !== 0 ) {
const tokenSlice =
savedPaymentMethodToken !== 0
? {
savedPaymentMethodToken,
}
: {
sourceId,
};
paymentStatus.setPaymentStatus().success( billingData, {
paymentMethod: PAYMENT_METHOD_NAME,
paymentRequestType: 'cc',
...tokenSlice,
shouldSavePayment,
} );
return true;
}
const stripeBilling = {
address: {
line1: billingData.address_1,
line2: billingData.address_2,
city: billingData.city,
state: billingData.state,
postal_code: billingData.postcode,
country: billingData.country,
},
};
if ( billingData.phone ) {
stripeBilling.phone = billingData.phone;
}
if ( billingData.email ) {
stripeBilling.email = billingData.email;
}
if ( billingData.first_name || billingData.last_name ) {
stripeBilling.name = `${ billingData.first_name } ${ billingData.last_name }`;
}

const response = await createSource( stripeBilling );
if ( response.error ) {
return onStripeError( response );
}
paymentStatus.setPaymentStatus().success( billingData, {
sourceId: response.source.id,
paymentMethod: PAYMENT_METHOD_NAME,
paymentRequestType: 'cc',
shouldSavePayment,
} );
setSourceId( response.source.id );
return true;
};
const onComplete = () => {
paymentStatus.setPaymentStatus().completed();
};
const onError = () => {
paymentStatus.setPaymentStatus().started();
};
// hook into and register callbacks for events.
useEffect( () => {
// @todo Right now all the registered callbacks will go stale, so we need
// either implement useRef or make sure functions being used from these
// callbacks don't change so we can add them as dependencies.
// validation and stripe processing (get source etc).
const unsubscribeProcessing = eventRegistration.onCheckoutProcessing(
onSubmit
);
const unsubscribeCheckoutComplete = eventRegistration.onCheckoutCompleteSuccess(
onComplete
);
const unsubscribeCheckoutCompleteError = eventRegistration.onCheckoutCompleteError(
onError
);
return () => {
unsubscribeProcessing();
unsubscribeCheckoutComplete();
unsubscribeCheckoutCompleteError();
};
}, [
eventRegistration.onCheckoutProcessing,
eventRegistration.onCheckoutCompleteSuccess,
eventRegistration.onCheckoutCompleteError,
] );

// we need to pass along source for customer from server if it's available
// and pre-populate for checkout (so it'd need to be returned with the
// order endpoint and available on billing details?)
Expand Down

0 comments on commit 278d58d

Please sign in to comment.