diff --git a/enabler/src/dropin/dropin-embedded.ts b/enabler/src/dropin/dropin-embedded.ts index 134b09c..c577d14 100644 --- a/enabler/src/dropin/dropin-embedded.ts +++ b/enabler/src/dropin/dropin-embedded.ts @@ -1,11 +1,29 @@ -import { - DropinComponent, - DropinOptions, - PaymentDropinBuilder, -} from "../payment-enabler/payment-enabler"; +import { DropinComponent, DropinOptions, PaymentDropinBuilder } from "../payment-enabler/payment-enabler"; import { BaseOptions } from "../payment-enabler/adyen-payment-enabler"; -import { ICore, SubmitActions, SubmitData } from "@adyen/adyen-web"; -import { Dropin } from "@adyen/adyen-web/auto"; +import { + ICore, + SubmitActions, + SubmitData, + Dropin, + Card, + PayPal, + GooglePay, + ApplePay, + Redirect, + AmazonPay, + SepaDirectDebit, + Twint, + Klarna, + Bancontact, + EPS, + Blik, + RatePay, + WeChat, + OnlineBankingPL, + Multibanco, + Affirm, + AfterPay, +} from "@adyen/adyen-web"; export class DropinEmbeddedBuilder implements PaymentDropinBuilder { public dropinHasSubmit = false; @@ -54,6 +72,26 @@ export class DropinComponents implements DropinComponent { .catch((error) => console.error(error)); } }, + paymentMethodComponents: [ + Affirm, + AfterPay, + AmazonPay, + ApplePay, + Bancontact, + Blik, + Card, + GooglePay, + EPS, + Klarna, + Multibanco, + OnlineBankingPL, + PayPal, + RatePay, + Redirect, + SepaDirectDebit, + Twint, + WeChat, + ], paymentMethodsConfiguration: { applepay: { buttonType: "pay" as any, // "pay" type is not included in Adyen's types, try to force it @@ -109,22 +147,15 @@ export class DropinComponents implements DropinComponent { } submit(): void { - throw new Error( - "Method not available. Submit is managed by the Dropin component." - ); + throw new Error("Method not available. Submit is managed by the Dropin component."); } private overrideOnSubmit() { const parentOnSubmit = this.adyenCheckout.options.onSubmit; - this.adyenCheckout.options.onSubmit = async ( - state: SubmitData, - component: Dropin, - actions: SubmitActions - ) => { + this.adyenCheckout.options.onSubmit = async (state: SubmitData, component: Dropin, actions: SubmitActions) => { const paymentMethod = state.data.paymentMethod.type; - const hasOnClick = - component.props.paymentMethodsConfiguration[paymentMethod]?.onClick; + const hasOnClick = component.props.paymentMethodsConfiguration[paymentMethod]?.onClick; if (!hasOnClick && this.dropinOptions.onPayButtonClick) { try { await this.dropinOptions.onPayButtonClick(); diff --git a/enabler/src/payment-enabler/adyen-payment-enabler.ts b/enabler/src/payment-enabler/adyen-payment-enabler.ts index 2320951..db280ca 100644 --- a/enabler/src/payment-enabler/adyen-payment-enabler.ts +++ b/enabler/src/payment-enabler/adyen-payment-enabler.ts @@ -8,8 +8,8 @@ import { SubmitActions, SubmitData, UIElement, + AdyenCheckout, } from "@adyen/adyen-web"; -import { AdyenCheckout } from "@adyen/adyen-web/auto"; import "@adyen-css"; import { DropinType, @@ -64,9 +64,7 @@ export class AdyenPaymentEnabler implements PaymentEnabler { this.setupData = AdyenPaymentEnabler._Setup(options); } - private static _Setup = async ( - options: AdyenEnablerOptions - ): Promise<{ baseOptions: BaseOptions }> => { + private static _Setup = async (options: AdyenEnablerOptions): Promise<{ baseOptions: BaseOptions }> => { const [sessionResponse, configResponse] = await Promise.all([ fetch(options.processorUrl + "/sessions", { method: "POST", @@ -85,24 +83,15 @@ export class AdyenPaymentEnabler implements PaymentEnabler { }), ]); - const [sessionJson, configJson] = await Promise.all([ - sessionResponse.json(), - configResponse.json(), - ]); + const [sessionJson, configJson] = await Promise.all([sessionResponse.json(), configResponse.json()]); const { sessionData: data, paymentReference } = sessionJson; if (!data || !data.id) { - throw new AdyenInitError( - "Not able to initialize Adyen, session data missing", - options.sessionId - ); + throw new AdyenInitError("Not able to initialize Adyen, session data missing", options.sessionId); } else { const adyenCheckout = await AdyenCheckout({ - onPaymentCompleted: ( - result: PaymentCompletedData, - _component: UIElement - ) => { + onPaymentCompleted: (result: PaymentCompletedData, _component: UIElement) => { console.info("payment completed", result.resultCode); }, onPaymentFailed: (result: PaymentFailedData, _component: UIElement) => { @@ -117,11 +106,7 @@ export class AdyenPaymentEnabler implements PaymentEnabler { } options.onError && options.onError(error); }, - onSubmit: async ( - state: SubmitData, - component: UIElement, - actions: SubmitActions - ) => { + onSubmit: async (state: SubmitData, component: UIElement, actions: SubmitActions) => { try { const reqData = { ...state.data, @@ -138,21 +123,14 @@ export class AdyenPaymentEnabler implements PaymentEnabler { }); const data = await response.json(); if (data.action) { - if ( - ["threeDS2", "qrCode"].includes(data.action.type) && - options.onActionRequired - ) { + if (["threeDS2", "qrCode"].includes(data.action.type) && options.onActionRequired) { options.onActionRequired({ type: "fullscreen" }); } component.handleAction(data.action); } else { - if ( - data.resultCode === "Authorised" || - data.resultCode === "Pending" - ) { + if (data.resultCode === "Authorised" || data.resultCode === "Pending") { component.setStatus("success"); - options.onComplete && - options.onComplete({ isSuccess: true, paymentReference }); + options.onComplete && options.onComplete({ isSuccess: true, paymentReference }); } else { options.onComplete && options.onComplete({ isSuccess: false }); component.setStatus("error"); @@ -192,13 +170,9 @@ export class AdyenPaymentEnabler implements PaymentEnabler { body: JSON.stringify(requestData), }); const data = await response.json(); - if ( - data.resultCode === "Authorised" || - data.resultCode === "Pending" - ) { + if (data.resultCode === "Authorised" || data.resultCode === "Pending") { component.setStatus("success"); - options.onComplete && - options.onComplete({ isSuccess: true, paymentReference }); + options.onComplete && options.onComplete({ isSuccess: true, paymentReference }); } else { options.onComplete && options.onComplete({ isSuccess: false }); component.setStatus("error"); @@ -237,9 +211,7 @@ export class AdyenPaymentEnabler implements PaymentEnabler { } }; - async createComponentBuilder( - type: string - ): Promise { + async createComponentBuilder(type: string): Promise { const setupData = await this.setupData; if (!setupData) { throw new Error("AdyenPaymentEnabler not initialized"); @@ -262,17 +234,13 @@ export class AdyenPaymentEnabler implements PaymentEnabler { }; if (!Object.keys(supportedMethods).includes(type)) { throw new Error( - `Component type not supported: ${type}. Supported types: ${Object.keys( - supportedMethods - ).join(", ")}` + `Component type not supported: ${type}. Supported types: ${Object.keys(supportedMethods).join(", ")}` ); } return new supportedMethods[type](setupData.baseOptions); } - async createDropinBuilder( - type: DropinType - ): Promise { + async createDropinBuilder(type: DropinType): Promise { const setupData = await this.setupData; if (!setupData) { throw new Error("AdyenPaymentEnabler not initialized"); @@ -283,9 +251,7 @@ export class AdyenPaymentEnabler implements PaymentEnabler { }; if (!Object.keys(supportedMethods).includes(type)) { throw new Error( - `Dropin type not supported: ${type}. Supported types: ${Object.keys( - supportedMethods - ).join(", ")}` + `Dropin type not supported: ${type}. Supported types: ${Object.keys(supportedMethods).join(", ")}` ); }