Skip to content

Commit

Permalink
Amazon Pay (#37)
Browse files Browse the repository at this point in the history
* feat: handle amazon session id to make a payment

* feat: provide necessary scripts in order to load the amazon button properly

* feat: provide additional config for amazonpay

* feat: show loading spinner when coming back from amazon

* fix: remove unneded log

* fix: mount amazon on div container
  • Loading branch information
amihajlovski authored Nov 10, 2023
1 parent d4c4b74 commit f622b53
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 9 deletions.
20 changes: 18 additions & 2 deletions adyen/components/AdyenCheckout.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@ import '@adyen/adyen-web/dist/adyen.css'
import {useAdyenCheckout} from '../context/adyen-checkout-context'

const AdyenCheckoutComponent = (props) => {
const {adyenPaymentMethods, getPaymentMethodsConfiguration, setAdyenStateData} =
useAdyenCheckout()
const {
adyenPaymentMethods,
getPaymentMethodsConfiguration,
setAdyenStateData,
setAdyenPaymentInProgress
} = useAdyenCheckout()
const paymentContainer = useRef(null)

useEffect(() => {
const urlParams = new URLSearchParams(location.search)
const redirectResult = urlParams.get('redirectResult')
const amazonCheckoutSessionId = urlParams.get('amazonCheckoutSessionId')

const createCheckout = async () => {
const paymentMethodsConfiguration = await getPaymentMethodsConfiguration(props)
const checkout = await AdyenCheckout({
Expand All @@ -33,6 +39,16 @@ const AdyenCheckoutComponent = (props) => {

if (redirectResult) {
checkout.submitDetails({data: {details: {redirectResult}}})
} else if (amazonCheckoutSessionId) {
setAdyenPaymentInProgress(true)
const amazonPayContainer = document.createElement('div')
const amazonPay = checkout
.create('amazonpay', {
amazonCheckoutSessionId,
showOrderButton: false
})
.mount(amazonPayContainer)
amazonPay.submit()
} else {
checkout.create('dropin').mount(paymentContainer.current)
}
Expand Down
10 changes: 10 additions & 0 deletions adyen/components/amazonpay/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {baseConfig} from '../helpers/baseConfig'

export const amazonPayConfig = (props) => {
return {
...baseConfig(props),
showPayButton: true,
productType: 'PayAndShip',
checkoutMode: 'ProcessOrder'
}
}
4 changes: 3 additions & 1 deletion adyen/components/paymentMethodsConfiguration.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {klarnaConfig} from './klarna/config'
import {cardConfig} from './card/config'
import {paypalConfig} from './paypal/config'
import {applePayConfig} from './applepay/config'
import {amazonPayConfig} from './amazonpay/config'

export const paymentMethodsConfiguration = ({paymentMethods = [], ...props}) => {
const defaultConfig = baseConfig(props)
Expand All @@ -12,7 +13,8 @@ export const paymentMethodsConfiguration = ({paymentMethods = [], ...props}) =>
klarna_account: klarnaConfig(props),
klarna_paynow: klarnaConfig(props),
paypal: paypalConfig(props),
applepay: applePayConfig(props)
applepay: applePayConfig(props),
amazonpay: amazonPayConfig(props)
}

return Object.fromEntries(
Expand Down
13 changes: 8 additions & 5 deletions adyen/context/adyen-checkout-context.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ export const AdyenCheckoutProvider = ({children}) => {
const locale = resolveLocaleFromUrl(`${location.pathname}${location.search}`)
const navigate = useNavigation()

const [fetching, setFetching] = useState(false)
const [fetchingPaymentMethods, setFetchingPaymentMethods] = useState(false)
const [adyenPaymentMethods, setAdyenPaymentMethods] = useState()
const [adyenStateData, setAdyenStateData] = useState()
const [adyenPaymentInProgress, setAdyenPaymentInProgress] = useState()

useEffect(() => {
const fetchPaymentMethods = async () => {
setFetching(true)
setFetchingPaymentMethods(true)
const token = await getTokenWhenReady()
const adyenPaymentMethodsService = new AdyenPaymentMethodsService(token)
try {
Expand All @@ -34,14 +35,14 @@ export const AdyenCheckoutProvider = ({children}) => {
locale
)
setAdyenPaymentMethods(data ? data : {error: true})
setFetching(false)
setFetchingPaymentMethods(false)
} catch (error) {
setAdyenPaymentMethods({error})
setFetching(false)
setFetchingPaymentMethods(false)
}
}

if (!adyenPaymentMethods && !fetching) {
if (!adyenPaymentMethods && !fetchingPaymentMethods) {
fetchPaymentMethods()
}
}, [basket?.basketId])
Expand Down Expand Up @@ -93,6 +94,8 @@ export const AdyenCheckoutProvider = ({children}) => {
const value = {
adyenPaymentMethods,
adyenStateData,
adyenPaymentInProgress,
setAdyenPaymentInProgress: (data) => setAdyenPaymentInProgress(data),
setAdyenStateData: (data) => setAdyenStateData(data),
getPaymentMethodsConfiguration
}
Expand Down
3 changes: 2 additions & 1 deletion overrides/app/pages/checkout/partials/payment.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const Payment = () => {
}

const {step, STEPS, goToStep, goToNextStep} = useCheckout()
const {adyenPaymentMethods, adyenStateData} = useAdyenCheckout()
const {adyenPaymentMethods, adyenStateData, adyenPaymentInProgress} = useAdyenCheckout()
const [isSubmittingPayment, setIsSubmittingPayment] = useState(false)

const billingAddressForm = useForm({
Expand Down Expand Up @@ -134,6 +134,7 @@ const Payment = () => {
editing={step === STEPS.PAYMENT}
isLoading={
!adyenPaymentMethods ||
adyenPaymentInProgress ||
billingAddressForm.formState.isSubmitting ||
isSubmittingPayment
}
Expand Down
4 changes: 4 additions & 0 deletions overrides/app/ssr.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,16 @@ const {handler} = runtime.createHandler(options, (app) => {
'data:',
'*.adyen.com',
'*.paypal.com',
'*.media-amazon.com',
'*.payments-amazon.com',
'https://www.paypalobjects.com/js-sdk-logos/2.2.7/paypal-blue.svg'
],
'script-src': [
"'self'",
"'unsafe-eval'",
'storage.googleapis.com',
'*.paypal.com',
'*.payments-amazon.com',
'https://x.klarnacdn.net/kp/lib/v1/api.js',
'https://static-eu.payments-amazon.com/checkout.js',
'https://sandbox.src.mastercard.com/sdk/srcsdk.mastercard.js',
Expand All @@ -73,6 +76,7 @@ const {handler} = runtime.createHandler(options, (app) => {
"'self'",
'api.cquotient.com',
'*.adyen.com',
'*.amazon.com',
'https://www.sandbox.paypal.com/xoplatform/logger/api/logger?disableSetCookie=true'
],
'frame-src': ["'self'", '*.adyen.com', '*.paypal.com'],
Expand Down

0 comments on commit f622b53

Please sign in to comment.