Skip to content

Commit

Permalink
Fix save customer card payment provided by Adyen
Browse files Browse the repository at this point in the history
  • Loading branch information
acasazza committed Oct 9, 2024
1 parent 10a0434 commit 69c58d4
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 73 deletions.
4 changes: 2 additions & 2 deletions packages/react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@
"dependencies": {
"@adyen/adyen-web": "^5.66.1",
"@commercelayer/organization-config": "^1.4.8",
"@commercelayer/sdk": "6.13.0",
"@commercelayer/sdk": "^6.13.0",
"@stripe/react-stripe-js": "^2.8.0",
"@stripe/stripe-js": "^4.3.0",
"@tanstack/react-table": "^8.17.3",
Expand Down Expand Up @@ -224,4 +224,4 @@
"peerDependencies": {
"react": ">=18.0.0"
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ type Props = {
}
)

let loadingResource = false

export function PaymentMethod({
children,
className,
Expand All @@ -74,6 +76,7 @@ export function PaymentMethod({
}: Props): JSX.Element {
const [loading, setLoading] = useState(true)
const [paymentSelected, setPaymentSelected] = useState('')
const [paymentSourceCreated, setPaymentSourceCreated] = useState(false)
const {
paymentMethods,
currentPaymentMethodId,
Expand Down Expand Up @@ -119,7 +122,13 @@ export function PaymentMethod({
}
}, [!isEmpty(paymentMethods), expressPayments])
useEffect(() => {
if (paymentMethods != null) {
if (
paymentMethods != null &&
!paymentSourceCreated &&
!loadingResource &&
!isEmpty(paymentMethods)
) {
loadingResource = true
if (autoSelectSinglePaymentMethod != null && !expressPayments) {
const autoSelect = async (): Promise<void> => {
const isSingle = paymentMethods.length === 1
Expand Down Expand Up @@ -148,6 +157,7 @@ export function PaymentMethod({
attributes
})
if (ps && paymentMethod && onClick != null) {
setPaymentSourceCreated(true)
onClick({ payment: paymentMethod, order, paymentSource: ps })
setTimeout(() => {
setLoading(false)
Expand All @@ -170,7 +180,11 @@ export function PaymentMethod({
void autoSelect()
}
}
}, [paymentMethods, expressPayments])
return () => {
setPaymentSourceCreated(false)
setLoading(true)
}
}, [order?.payment_source != null])
useEffect(() => {
if (paymentMethods) {
const isSingle = paymentMethods.length === 1
Expand All @@ -187,6 +201,7 @@ export function PaymentMethod({
if (currentPaymentMethodId) setPaymentSelected(currentPaymentMethodId)
return () => {
setLoading(true)
setPaymentSelected('')
}
}, [paymentMethods, currentPaymentMethodId])
const components = paymentMethods
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import { type PaymentSourceProps } from './PaymentSource'
import { setCustomerOrderParam } from '#utils/localStorage'
import type { CoreOptions } from '@adyen/adyen-web/dist/types/core/types'
import Parent from '#components/utils/Parent'
import getBrowserInfo, { cleanUrlBy } from '#utils/browserInfo'
import { cleanUrlBy } from '#utils/browserInfo'
import PlaceOrderContext from '#context/PlaceOrderContext'
import OrderContext from '#context/OrderContext'
import omit from '#utils/omit'
// import omit from '#utils/omit'
import type UIElement from '@adyen/adyen-web/dist/types/components/UIElement'
import { getPublicIP } from '#utils/getPublicIp'

Expand Down Expand Up @@ -88,6 +88,7 @@ export function AdyenPayment({
}
const [loadAdyen, setLoadAdyen] = useState(false)
const [checkout, setCheckout] = useState<UIElement<any> | undefined>()
// const [showSaveToWallet, setShowSaveToWallet] = useState(true)
const {
setPaymentSource,
paymentSource,
Expand Down Expand Up @@ -125,30 +126,6 @@ export function AdyenPayment({
}
setPaymentRef({ ref })
}
const browserInfo = getBrowserInfo()
const shopperIp = await getPublicIP()
const attributes: any = {
payment_request_data: {
payment_method: state.data.paymentMethod,
shopperInteraction: 'Ecommerce',
recurringProcessingModel: 'CardOnFile',
origin: window.location.origin,
return_url: window.location.href,
redirect_from_issuer_method: 'GET',
shopper_ip: shopperIp,
browser_info: {
acceptHeader:
'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
...browserInfo
}
}
}
paymentSource &&
(await setPaymentSource({
paymentSourceId: paymentSource.id,
paymentResource: 'adyen_payments',
attributes
}))
}
}
const handleOnAdditionalDetails = async (
Expand Down Expand Up @@ -209,12 +186,9 @@ export function AdyenPayment({
state: any,
component: UIElement<any>
): Promise<boolean> => {
const saveCustomer = document.getElementById(
'save_payment_source_to_customer_wallet'
) as HTMLInputElement
const url = cleanUrlBy()
const shopperIp = await getPublicIP()
let control = await setPaymentSource({
const control = await setPaymentSource({
paymentSourceId: paymentSource?.id,
paymentResource: 'adyen_payments'
})
Expand All @@ -223,58 +197,32 @@ export function AdyenPayment({
if (controlCode === 'Authorised') {
return true
}

const paymentDataAvailable =
// @ts-expect-error no type
Object.keys(control?.payment_request_data).length > 0
const paymentMethodSelected =
// @ts-expect-error no type
control?.payment_request_data?.payment_method?.type
const paymentMethod = !saveCustomer?.checked
? omit(state.data.paymentMethod, [
'encryptedCardNumber',
'encryptedExpiryMonth',
'encryptedExpiryYear'
])
: state.data.paymentMethod

if (
!paymentDataAvailable ||
paymentMethodSelected !== state.data.paymentMethod.type
) {
control = await setPaymentSource({
paymentSourceId: paymentSource?.id,
paymentResource: 'adyen_payments',
attributes: {
payment_request_data: {
...state.data,
payment_method: paymentMethod,
return_url: url,
origin: window.location.origin,
redirect_from_issuer_method: 'GET',
shopper_ip: shopperIp
}
}
})
}
const attributes: any = {
payment_request_data: {
...state.data,
payment_method: paymentMethod,
payment_method: state.data.paymentMethod,
return_url: url,
origin: window.location.origin,
redirect_from_issuer_method: 'GET',
shopper_ip: shopperIp
},
_authorize: 1
shopper_ip: shopperIp,
shopperInteraction: 'Ecommerce',
recurringProcessingModel: 'CardOnFile'
}
}
delete attributes.payment_request_data.paymentMethod
try {
const res = await setPaymentSource({
await setPaymentSource({
paymentSourceId: paymentSource?.id,
paymentResource: 'adyen_payments',
attributes
})
const res = await setPaymentSource({
paymentSourceId: paymentSource?.id,
paymentResource: 'adyen_payments',
attributes: {
_authorize: 1
}
})
// @ts-expect-error no type
const action = res?.payment_response?.action
if (component && action) {
Expand Down

0 comments on commit 69c58d4

Please sign in to comment.