adv flow with mode-switcher

examples/angular/src/api/index.ts

@@ -44,3 +44,45 @@ router.post('/paymentMethods', async (req, res) => {
 
     res.status(200).json(data);
 });
+
+router.post('/payments', async (req, res) => {
+    const body = {
+        ...req.body,
+        merchantAccount: environment.merchantAccount
+    };
+
+    const response = await fetch(`https://checkout-test.adyen.com/${environment.apiVersion}/payments`, {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Content-Type': 'application/json',
+            'X-Api-Key': environment.apiKey
+        }
+    });
+
+    const data = await response.json();
+
+    res.status(200).json(data);
+});
+
+router.post('/paymentDetails', async (req, res) => {
+    const body = {
+        ...req.body,
+        merchantAccount: environment.merchantAccount
+    };
+
+    const response = await fetch(`https://checkout-test.adyen.com/${environment.apiVersion}/payments/details`, {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Content-Type': 'application/json',
+            'X-Api-Key': environment.apiKey
+        }
+    });
+
+    const data = await response.json();
+
+    res.status(200).json(data);
+});

examples/angular/src/app/app.component.html

@@ -1,9 +1,7 @@
-<style>
-
-</style>
-
 <main class="main">
   <div class="content">
+
+    <mode-switcher></mode-switcher>
     <router-outlet></router-outlet>
   </div>
 </main>

examples/angular/src/app/app.component.ts

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { SessionsFlow } from '../components/sessions-flow/sessions.component';
+import { ModeSwitcher } from '../components/mode-switcher/mode-switcher';
 
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [SessionsFlow, RouterOutlet],
+    imports: [SessionsFlow, RouterOutlet, ModeSwitcher],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css'
 })

examples/angular/src/components/advanced-flow/advanced.component.ts

@@ -1,10 +1,21 @@
 import { Component, ElementRef, ViewChild, OnInit, Inject, PLATFORM_ID } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
-import { AdyenCheckout, CoreConfiguration, Dropin, Card } from '@adyen/adyen-web/auto';
+import {
+    AdyenCheckout,
+    CoreConfiguration,
+    Dropin,
+    Card,
+    AdyenCheckoutError,
+    PaymentCompletedData,
+    UIElement,
+    PaymentFailedData,
+    AdditionalDetailsData,
+    AdditionalDetailsActions,
+    SubmitActions,
+    SubmitData
+} from '@adyen/adyen-web/auto';
 
 import { environment } from '../../environments/environment';
-import { ApiService } from '../../services/api.service';
 import { parseAmount } from '../../utils/amount-utils';
 import { DEFAULT_AMOUNT, DEFAULT_COUNTRY, DEFAULT_LOCALE } from '../../utils/constants';
 import { AdvancedFlowApiService } from '../../services/AdvancedFlowApi.service';
@@ -22,7 +33,6 @@ export class AdvancedFlow implements OnInit {
 
     constructor(
         private apiService: AdvancedFlowApiService,
-        private route: ActivatedRoute,
         @Inject(PLATFORM_ID) private platformId: Object
     ) {
         this.hook = new ElementRef('');
@@ -43,22 +53,70 @@ export class AdvancedFlow implements OnInit {
         const amount = parseAmount(urlParams.get('amount') || DEFAULT_AMOUNT, countryCode);
 
         this.apiService.fetchPaymentMethods(countryCode, locale, amount).subscribe(async paymentMethodsResponse => {
-            console.log(paymentMethodsResponse);
-
             const options: CoreConfiguration = {
-                paymentMethodsResponse,
+                amount,
                 countryCode,
                 locale,
                 environment: 'test',
                 clientKey: environment.clientKey,
+                paymentMethodsResponse,
+
+                onSubmit: async (state: SubmitData, component: UIElement, actions: SubmitActions) => {
+                    this.apiService.makePaymentsCall(state.data, countryCode, locale, amount).subscribe(result => {
+                        if (!result.resultCode) {
+                            actions.reject();
+                            return;
+                        }
+
+                        const { resultCode, action, order, donationToken } = result;
+
+                        actions.resolve({
+                            resultCode,
+                            action,
+                            order,
+                            donationToken
+                        });
+                    });
+                },
 
-                onSubmit(state, component, actions) {
-                    console.log('onSubmit', state, component, actions);
+                onAdditionalDetails: async (state: AdditionalDetailsData, component: UIElement, actions: AdditionalDetailsActions) => {
+                    this.apiService.makeDetailsCall(state.data).subscribe(result => {
+                        if (!result.resultCode) {
+                            actions.reject();
+                            return;
+                        }
+
+                        const { resultCode, action, order, donationToken } = result;
+
+                        actions.resolve({
+                            resultCode,
+                            action,
+                            order,
+                            donationToken
+                        });
+                    });
+                },
+
+                onError(error: AdyenCheckoutError) {
+                    console.error('Something went wrong', error);
+                },
+
+                onPaymentCompleted(data: PaymentCompletedData, element: UIElement) {
+                    console.log(data, element);
+                },
+
+                onPaymentFailed(data: PaymentFailedData, element: UIElement) {
+                    console.log(data, element);
                 }
             };
 
             const checkout = await AdyenCheckout(options);
             this.dropin = new Dropin(checkout, {
+                paymentMethodsConfiguration: {
+                    card: {
+                        _disableClickToPay: true
+                    }
+                }
                 //@ts-ignore
                 // paymentMethodComponents: [Card]
             }).mount(this.hook.nativeElement);

examples/angular/src/components/mode-switcher/mode-switcher.css

@@ -0,0 +1,39 @@
+.mode-switcher {
+    max-width: 800px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+    padding: 4px 5px;
+    background: #FFFFFF;
+    border: 1px solid #b9c4c9;
+    border-radius: 6px;
+}
+
+
+.mode-switcher__button {
+    font-weight: 500;
+    color: #0075FF;
+    width: 100%;
+    height: 40px;
+    flex-grow: 1;
+    cursor: pointer;
+    background: #FFFFFF;
+    border-radius: 6px;
+    border: 0;
+    text-align: center;
+    transition: background 0.3s ease-out;
+}
+
+.mode-switcher__button--selected {
+    background: #E5F1FF;
+    border: 1.5px solid #0075FF;
+    color: #0075FF;
+    font-weight: 700;
+}
+
+.mode-switcher__button:not(.mode-switcher__button--selected):hover {
+    background-color: #f7f8f9;
+}

examples/angular/src/components/mode-switcher/mode-switcher.html

@@ -0,0 +1,19 @@
+<div class="mode-switcher">
+    <button
+        class="mode-switcher__button"
+        [ngClass]="{ 'mode-switcher__button--selected': isAdvancedFlowPageActive }"
+        type="button"
+        (click)="onAdvancedFlowClick()"
+    >
+        Advanced flow
+    </button>
+
+    <button
+        class="mode-switcher__button"
+        [ngClass]="{ 'mode-switcher__button--selected': !isAdvancedFlowPageActive }"
+        type="button"
+        (click)="onSessionsFlowClick()"
+    >
+        Sessions flow
+    </button>
+</div>

examples/angular/src/components/mode-switcher/mode-switcher.ts

@@ -0,0 +1,32 @@
+import { NgClass, Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+@Component({
+    selector: 'mode-switcher',
+    templateUrl: './mode-switcher.html',
+    styleUrl: './mode-switcher.css',
+    imports: [NgClass],
+    standalone: true
+})
+export class ModeSwitcher implements OnInit {
+    isAdvancedFlowPageActive = false;
+
+    constructor(private router: Router) {}
+
+    ngOnInit() {
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
+            // @ts-ignore
+            this.isAdvancedFlowPageActive = event.url === '/advanced-flow';
+        });
+    }
+
+    onAdvancedFlowClick() {
+        this.router.navigate(['advanced-flow']);
+    }
+
+    onSessionsFlowClick() {
+        this.router.navigate(['sessions-flow']);
+    }
+}

examples/angular/src/components/sessions-flow/sessions.component.ts

@@ -74,6 +74,11 @@ export class SessionsFlow implements OnInit {
 
             const checkout = await AdyenCheckout(options);
             this.dropin = new Dropin(checkout, {
+                paymentMethodsConfiguration: {
+                    card: {
+                        _disableClickToPay: true
+                    }
+                },
                 //@ts-ignore
                 paymentMethodComponents: [Card]
             }).mount(this.hook.nativeElement);

examples/angular/src/services/AdvancedFlowApi.service.ts

@@ -1,6 +1,15 @@
+import { AdditionalDetailsData, ResultCode } from '@adyen/adyen-web';
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { DEFAULT_SHOPPER_REFERENCE } from '../utils/constants';
+import paymentsConfig from '../utils/paymentsConfig';
+
+type PaymentsResponse = {
+    resultCode: ResultCode;
+    action?: any;
+    order?: any;
+    donationToken?: string;
+};
 
 const httpOptions = {
     headers: new HttpHeaders({
@@ -33,4 +42,22 @@ export class AdvancedFlowApiService {
 
         return this.http.post('/api/paymentMethods', payload, httpOptions);
     }
+
+    makePaymentsCall(data: any, countryCode: string, shopperLocale: string, amount: { currency: string; value: number }) {
+        const payload = {
+            ...paymentsConfig,
+            ...data,
+            countryCode,
+            shopperLocale,
+            amount,
+            shopperReference: DEFAULT_SHOPPER_REFERENCE,
+            channel: 'Web'
+        };
+
+        return this.http.post<PaymentsResponse>('/api/payments', payload, httpOptions);
+    }
+
+    makeDetailsCall(data: AdditionalDetailsData['data']) {
+        return this.http.post<PaymentsResponse>('/api/paymentDetails', data, httpOptions);
+    }
 }