Skip to content
Adobe Commerce Storefront

Payment Services Dictionary

The Payment Services dictionary contains all user-facing text, labels, and messages displayed by this drop-in. By customizing the dictionary, you can:

  • Localize the drop-in for different languages and regions
  • Customize labels and messages to match your brand voice
  • Override default text without modifying the drop-in’s source code

Dictionaries use the i18n (internationalization) pattern, where each text string is identified by a unique key path.

Version: 1.0.2

Default keys and values

Below are the default English (en_US) strings provided by the Payment Services drop-in (21 keys):

{
  "PaymentServices": {
    "CreditCard": {
      "formFields": {
        "cvv": {
          "invalidError": "Enter valid cvv.",
          "label": "",
          "missingError": "This field is required.",
          "placeholder": "CVV*"
        },
        "expirationDate": {
          "invalidError": "Enter valid expiration date.",
          "label": "",
          "missingError": "This field is required.",
          "placeholder": "MM/YY*"
        },
        "number": {
          "invalidError": "Enter valid card number.",
          "label": "",
          "missingError": "This field is required.",
          "placeholder": "Card Number*"
        }
      },
      "messages": {
        "methodNotAvailable": "Payment method not available. Please contact support.",
        "methodNotLoaded": "Failed to load payment method. Please try again later."
      }
    }
  }
}

How to customize

You can override any of these dictionary values by creating a custom dictionary file and loading it during drop-in initialization. The drop-in will automatically deep-merge your custom values with these defaults.

For complete step-by-step instructions, see the Dictionary customization guide.

Quick example:

import { initialize } from '@dropins/storefront-payment-services';


await initialize({
  langDefinitions: {
    en_US: {
  "PaymentServices": {
    "CreditCard": {
      "formFields": {
        "cvv": {
          "invalidError": "Custom string",
          "missingError": "Custom string"
        }
      }
    }
  }
}
  }
});