Skip to content

Commit

Permalink
Merge branch 'main' into dasanorct/support_session_merchant_return_url
Browse files Browse the repository at this point in the history
  • Loading branch information
dasanorct committed Mar 12, 2024
2 parents b77c4b9 + e0cf38a commit 914b407
Show file tree
Hide file tree
Showing 9 changed files with 318 additions and 204 deletions.
87 changes: 58 additions & 29 deletions enabler/src/components/base.ts
Original file line number Diff line number Diff line change
@@ -1,58 +1,87 @@
import Core from '@adyen/adyen-web/dist/types/core/core';
import { ComponentOptions, PaymentComponent, PaymentMethod } from '../payment-enabler/payment-enabler';
import ApplePay from '@adyen/adyen-web/dist/types/components/ApplePay';
import GooglePay from '@adyen/adyen-web/dist/types/components/GooglePay';
import RedirectElement from '@adyen/adyen-web/dist/types/components/Redirect/Redirect';
import ApplePay from "@adyen/adyen-web/dist/types/components/ApplePay";
import GooglePay from "@adyen/adyen-web/dist/types/components/GooglePay";
import RedirectElement from "@adyen/adyen-web/dist/types/components/Redirect/Redirect";
import Core from "@adyen/adyen-web/dist/types/core/core";
import {
ComponentOptions,
PaymentComponent,
PaymentComponentBuilder,
PaymentMethod,
} from "../payment-enabler/payment-enabler";

export type BaseOptions = {
adyenCheckout: typeof Core;
}
};

/**
* Base Web Component
*/
export abstract class BaseComponent implements PaymentComponent {
export abstract class AdyenBaseComponentBuilder
implements PaymentComponentBuilder
{
public componentHasSubmit = true;

protected paymentMethod: PaymentMethod;
protected adyenCheckout: typeof Core;
protected config: ComponentOptions['config'];
protected component: typeof ApplePay | typeof GooglePay | typeof RedirectElement;

constructor(paymentMethod: PaymentMethod, baseOptions: BaseOptions, componentOptions: ComponentOptions) {
constructor(paymentMethod: PaymentMethod, baseOptions: BaseOptions) {
this.paymentMethod = paymentMethod;
this.adyenCheckout = baseOptions.adyenCheckout;
this.config = componentOptions.config;
this.component = this._create();
}

protected _create(): typeof ApplePay | typeof GooglePay | typeof RedirectElement {
return this.adyenCheckout.create(this.paymentMethod, this.config);
build(config: ComponentOptions): PaymentComponent {
const component = new DefaultAdyenComponent(
this.paymentMethod,
this.adyenCheckout,
config
);
component.init();
return component;
}
}

submit() {
export class DefaultAdyenComponent implements PaymentComponent {
protected component:
| typeof ApplePay
| typeof GooglePay
| typeof RedirectElement;
protected paymentMethod: PaymentMethod;
protected adyenCheckout: typeof Core;
protected componentOptions: ComponentOptions;

constructor(
paymentMethod: PaymentMethod,
adyenCheckout: typeof Core,
componentOptions: ComponentOptions
) {
this.paymentMethod = paymentMethod;
this.adyenCheckout = adyenCheckout;
this.componentOptions = componentOptions;
}
// This is an internal method
init() {
this.component = this.adyenCheckout.create(
this.paymentMethod,
this.componentOptions
);
}

submit() {
this.component.submit();
};
}

mount(selector: string) {
if ('isAvailable' in this.component) {
this.component.isAvailable()
if ("isAvailable" in this.component) {
this.component
.isAvailable()
.then(() => {
this.component.mount(selector);
})
.catch((e: unknown) => {
console.log(`${this.paymentMethod } is not available`, e);
console.log(`${this.paymentMethod} is not available`, e);
});
} else {
this.component.mount(selector);
}
}

showValidation?(): void;
isValid?(): boolean;
getState?(): {
card?: {
endDigits?: string;
brand?: string;
expiryDate? : string;
}
};
}
11 changes: 6 additions & 5 deletions enabler/src/components/payment-methods/applepay.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { BaseComponent, BaseOptions } from '../base';
import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
import { PaymentMethod } from "../../payment-enabler/payment-enabler";
import { AdyenBaseComponentBuilder, BaseOptions } from "../base";

/**
* Apple pay component
*
* Configuration options:
* https://docs.adyen.com/payment-methods/apple-pay/web-component/
*/
export class Applepay extends BaseComponent {
constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
super(PaymentMethod.applepay, baseOptions, componentOptions);
export class ApplepayBuilder extends AdyenBaseComponentBuilder {
public componentHasSubmit = false;
constructor(baseOptions: BaseOptions) {
super(PaymentMethod.applepay, baseOptions);
}
}
47 changes: 36 additions & 11 deletions enabler/src/components/payment-methods/card.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
import { BaseComponent, BaseOptions } from '../base';
import Core from "@adyen/adyen-web/dist/types/core/core";
import {
ComponentOptions,
PaymentComponent,
PaymentMethod,
} from "../../payment-enabler/payment-enabler";
import {
AdyenBaseComponentBuilder,
BaseOptions,
DefaultAdyenComponent,
} from "../base";

/**
* Credit card component
Expand All @@ -8,28 +17,45 @@ import { BaseComponent, BaseOptions } from '../base';
* https://docs.adyen.com/payment-methods/cards/web-component/
*/

export class CardBuilder extends AdyenBaseComponentBuilder {

export class Card extends BaseComponent {
constructor(baseOptions: BaseOptions) {
super(PaymentMethod.card, baseOptions);
}

build(config: ComponentOptions): PaymentComponent {
const cardComponent = new CardComponent(this.paymentMethod, this.adyenCheckout, config);
cardComponent.init();
return cardComponent;
}
}

export class CardComponent extends DefaultAdyenComponent {
private endDigits: string;

constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
super(PaymentMethod.card, baseOptions, componentOptions);
constructor(
paymentMethod: PaymentMethod,
adyenCheckout: typeof Core,
componentOptions: ComponentOptions
) {
super(paymentMethod, adyenCheckout, componentOptions);
}

protected _create() {
init() {
const that = this;
return this.adyenCheckout.create(this.paymentMethod, {
this.component = this.adyenCheckout.create(this.paymentMethod, {
onFieldValid : function(data) {
const { endDigits, fieldType } = data;
if (endDigits && fieldType === 'encryptedCardNumber') {
that.endDigits = endDigits;
}
},
...this.config,
hasHolderName: true,
holderNameRequired: true,
...this.componentOptions,
});
}


showValidation() {
this.component.showValidation();
}
Expand All @@ -43,8 +69,7 @@ export class Card extends BaseComponent {
card: {
endDigits: this.endDigits,
brand: this.component.state.selectedBrandValue,
}
},
};
}

}
12 changes: 7 additions & 5 deletions enabler/src/components/payment-methods/googlepay.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { BaseComponent, BaseOptions } from '../base';
import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
import { PaymentMethod } from '../../payment-enabler/payment-enabler';
import { AdyenBaseComponentBuilder, BaseOptions } from '../base';

/**
* Google pay component
*
* Configuration options:
* https://docs.adyen.com/payment-methods/google-pay/web-component/
*/
export class Googlepay extends BaseComponent {
constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
super(PaymentMethod.googlepay, baseOptions, componentOptions);
export class GooglepayBuilder extends AdyenBaseComponentBuilder {
public componentHasSubmit = false;

constructor(baseOptions: BaseOptions) {
super(PaymentMethod.googlepay, baseOptions);
}
}
35 changes: 30 additions & 5 deletions enabler/src/components/payment-methods/ideal.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,39 @@
import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
import { BaseComponent, BaseOptions } from '../base';
import Core from "@adyen/adyen-web/dist/types/core/core";
import {
ComponentOptions,
PaymentComponent,
PaymentMethod,
} from "../../payment-enabler/payment-enabler";
import {
AdyenBaseComponentBuilder,
DefaultAdyenComponent,
BaseOptions,
} from "../base";
/**
* Ideal component
*
* Configuration options:
* https://docs.adyen.com/payment-methods/ideal/web-component/
*/
export class Ideal extends BaseComponent {
constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
super(PaymentMethod.ideal, baseOptions, componentOptions);
export class IdealBuilder extends AdyenBaseComponentBuilder {
constructor(baseOptions: BaseOptions) {
super(PaymentMethod.ideal, baseOptions);
}

build(config: ComponentOptions): PaymentComponent {
const idealComponent = new IdealComponent(this.paymentMethod, this.adyenCheckout, config);
idealComponent.init();
return idealComponent;
}
}

export class IdealComponent extends DefaultAdyenComponent {
constructor(
paymentMethod: PaymentMethod,
adyenCheckout: typeof Core,
componentOptions: ComponentOptions
) {
super(paymentMethod, adyenCheckout, componentOptions);
}

showValidation() {
Expand Down
17 changes: 0 additions & 17 deletions enabler/src/components/payment-methods/klarna.ts

This file was deleted.

53 changes: 38 additions & 15 deletions enabler/src/components/payment-methods/paypal.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,50 @@
import { BaseComponent, BaseOptions } from '../base';
import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
import Core from "@adyen/adyen-web/dist/types/core/core";
import {
ComponentOptions,
PaymentComponent,
PaymentMethod
} from "../../payment-enabler/payment-enabler";
import {
AdyenBaseComponentBuilder,
DefaultAdyenComponent,
BaseOptions,
} from "../base";

/**
* Paypal component
*
* Configuration options:
* https://docs.adyen.com/payment-methods/paypal/web-component/
*/
export class Paypal extends BaseComponent {
constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
// TODO:

/*
Hide Venmo
If you and your shopper are both located in the US, Venmo is shown in the PayPal Component by default. To hide Venmo in the PayPal Component, set blockPayPalVenmoButton to true.
export class PaypalBuilder extends AdyenBaseComponentBuilder {
public componentHasSubmit = false;

constructor(baseOptions: BaseOptions) {
super(PaymentMethod.paypal, baseOptions);
}

Use the create method of your AdyenCheckout instance, in this case checkout, to create an instance of the Component. Add the configuration object if you created one.
build(config: ComponentOptions): PaymentComponent {
const paypalComponent = new PaypalComponent(this.paymentMethod, this.adyenCheckout, config);
paypalComponent.init();
return paypalComponent;
}
}

export class PaypalComponent extends DefaultAdyenComponent {
constructor(
paymentMethod: PaymentMethod,
adyenCheckout: typeof Core,
componentOptions: ComponentOptions
) {
super(paymentMethod, adyenCheckout, componentOptions);
}

const paypalComponent = checkout.create('paypal', paypalConfiguration).mount('#paypal-container');
*/
super(PaymentMethod.paypal, baseOptions, componentOptions);
init() {
this.component = this.adyenCheckout.create(this.paymentMethod, {
...this.componentOptions,
blockPayPalCreditButton: true,
blockPayPalPayLaterButton: true,
blockPayPalVenmoButton: true,
});
}
}
Loading

0 comments on commit 914b407

Please sign in to comment.