fix(PAYMENTS-18786) google pay, payment methods

src/features/headless-checkout/web-components/pages/google-pay/google-pay-button-color.type.ts

@@ -0,0 +1 @@
+export type GooglePayButtonColorType = 'default' | 'white' | 'black';

src/features/headless-checkout/web-components/pages/google-pay/google-pay-button.component.ts

@@ -1,14 +1,20 @@
 import { SecureComponentAbstract } from '../../../../../core/web-components/secure-component/secure-component.abstract';
 import { headlessCheckoutAppUrl } from '../../../environment';
+import { GooglePayButtonColorType } from './google-pay-button-color.type';
 
 export class GooglePayButtonComponent extends SecureComponentAbstract {
   protected componentName = 'pages/google-pay-button';
+  private buttonColor: GooglePayButtonColorType = 'default';
+
+  public setButtonColor(color: GooglePayButtonColorType): void {
+    this.buttonColor = color;
+  }
 
   protected getHtml(): string {
     return this.getSecureHtml();
   }
 
   protected getSecureHtml(): string {
-    return `<iframe allow='payment' src='${headlessCheckoutAppUrl}/secure-components/${this.componentName}'></iframe>`;
+    return `<iframe allow='payment' src='${headlessCheckoutAppUrl}/secure-components/${this.componentName}?buttonColor=${this.buttonColor}'></iframe>`;
   }
 }

src/features/headless-checkout/web-components/payment-methods/payment-methods-attributes.enum.ts

@@ -1,5 +1,6 @@
 export enum PaymentMethodsAttributes {
   country = 'country',
+  skipPaymentMethodsCount = 'skipPaymentMethodsCount',
   notFound = 'not-found',
   searchPlaceholder = 'search-placeholder',
   saveMethodMode = 'save-method-mode',

src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts

@@ -41,7 +41,10 @@ export class PaymentMethodsComponent extends WebComponentAbstract {
   }
 
   public static get observedAttributes(): string[] {
-    return [PaymentMethodsAttributes.country];
+    return [
+      PaymentMethodsAttributes.country,
+      PaymentMethodsAttributes.skipPaymentMethodsCount,
+    ];
   }
 
   protected connectedCallback(): void {
@@ -78,6 +81,7 @@ export class PaymentMethodsComponent extends WebComponentAbstract {
   private loadRegularMethods(): void {
     const country =
       this.getAttribute(PaymentMethodsAttributes.country) ?? undefined;
+
     void this.headlessCheckout
       .getRegularMethods({ country, isSaveMethodMode: this.isSaveMethodMode })
       .then(this.paymentMethodsLoadedHandler);
@@ -86,7 +90,11 @@ export class PaymentMethodsComponent extends WebComponentAbstract {
   private readonly paymentMethodsLoadedHandler = (
     paymentMethods: PaymentMethod[],
   ): void => {
-    this.paymentMethods = paymentMethods;
+    const skipPaymentMethodsCount = Number(
+      this.getAttribute(PaymentMethodsAttributes.skipPaymentMethodsCount),
+    );
+
+    this.paymentMethods = paymentMethods.slice(skipPaymentMethodsCount);
     this.visibleMethods = this.paymentMethods;
     this.filteredMethods = this.visibleMethods.slice();