Payment Services Dictionary

The Payment Services dictionary contains all user-facing text, labels, and messages displayed by this drop-in. Customize the dictionary to:

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

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

Version: 2.0.0

How to customize

Override dictionary values during drop-in initialization. The drop-in deep-merges your custom values with the defaults.

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

await initialize({
  langDefinitions: {
    en_US: {
      "PaymentServices": {
        "ApplePay": {
          "errors": {
            "default": {
              "name": "Custom value",
              "message": "Your custom message here"
            }
          }
        }
      }
    }
  }
});

You only need to include the keys you want to change. For multi-language support and advanced patterns, see the Dictionary customization guide.

Default keys and values

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

{
  "PaymentServices": {
    "ApplePay": {
      "errors": {
        "default": {
          "name": "Apple Pay error",
          "message": "An unexpected error occurred. Please try again or contact support."
        }
      }
    },
    "CreditCard": {
      "errors": {
        "default": {
          "name": "Credit Card error",
          "message": "An unexpected error occurred. Please try again or contact support."
        }
      },
      "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.",
      "methodLoading": "Loading payment method..."
    }
  }
}