Payment Services initialization

The Payment Services drop-in component initializer provides options for setting the backend endpoint and configuring language definitions.

Configuration options

The Payment Services component initializer accepts the following configuration options:

Option	Type	Req?	Description
apiUrl	string	Yes	The Adobe Commerce GraphQL endpoint URL, such as “https://example.com/graphql”.
getCustomerToken	function	Yes	The Payment Services drop-in can send GraphQL requests on behalf of the shopper. This requires GraphQL authorization, which can be performed using authorization tokens or session cookies. For token-based authorization, the getCustomerToken function should return a customer token as a string, or null for guest customers. For session-based authorization, the getCustomerToken property must explicitly be set to null.
langDefinitions	object	No	Provides language definitions for internationalization (i18n).

Initialization is asynchronous

The Payment Services drop-in initializer is fully asynchronous. Even if mounted immediately, it initializes in the background and emits initialization updates via custom events.

Payment method availability

During asynchronous initialization, the Payment Services drop-in emits a series of events to signal drop-in readiness in different locations. For each of these events, the event payload is an { availablePaymentMethods: string[] } object containing the available payment method codes.

The following table contains the available event names and their descriptions:

Event name	Description
payment-services/initialized/checkout	Drop-in initialized for the CHECKOUT location, with event.availablePaymentMethods determining the payment methods available for the checkout page.
payment-services/initialized/product-detail	Drop-in initialized for the PRODUCT_DETAIL location, with event.availablePaymentMethods determining the payment methods available for the product details page.

The following code shows an example implementation of payment method availability event handlers for the checkout page.

import { PaymentMethodCode } from '@dropins/storefront-payment-services/api.js';
import { events } from '@dropins/tools/event-bus.js';

events.on('payment-services/initialized/checkout', ({ availablePaymentMethods }) => {
  if (availablePaymentMethods.contains(PaymentMethodCode.APPLE_PAY)) {
    console.log("Apple Pay available for checkout page.");
  }
  if (availablePaymentMethods.contains(PaymentMethodCode.CREDIT_CARD)) {
    console.log("Credit Card available for checkout page.");
  }
});

Initialization example

import { fetchPlaceholders } from '../commerce.js';
import { getConfigValue } from '@dropins/tools/lib/aem/configs.js';
import { getCookie } from '@dropins/tools/lib.js';
import { initializers } from '@dropins/tools/initializer.js';

const initializeDropin = async () => {
  const labels = await fetchPlaceholders('placeholders/payment-services.json');
  const langDefinitions = {
    default: {
      ...labels,
    },
  };

  const coreEndpoint = await getConfigValue('commerce-core-endpoint');
  const getUserTokenCookie = () => getCookie('auth_dropin_user_token');

  return initializers.mountImmediately(initialize, {
    apiUrl: coreEndpoint,
    getCustomerToken: getUserTokenCookie,
    langDefinitions,
  });
};

await initializeDropin();