The classic Checkout SDK integrations are being phased out
This means we are:
- No longer developing the classic Checkout SDK integration.
- Not accepting new classic Checkout SDK integrations.
You have until March 31, 2024 to migrate.
The Checkout Web SDK provides out-of-the-box support for the following translations:
Language | shopperLocale |
---|---|
Chinese - Simplified | zh_CN |
Chinese - Traditional | zh_TW |
Danish (Web SDK 1.3.1 and later) | da_DK |
Dutch | nl_NL |
English - US | en_US |
French | fr_FR |
German | de_DE |
Italian | it_IT |
Japanese (Web SDK 1.6.5 and later) | ja_JP |
Norwegian (Web SDK 1.5.0 and later) | no_NO |
Polish (Web SDK 1.3.0 and later) | pl_PL |
Portuguese | pt_BR |
Spanish | es_ES |
Swedish | sv_SE |
The translation that a shopper will see in your Checkout is set with the shopperLocale
specified in the payment session. For each translation, you can customize the text displayed on your Checkout.
For shoppers in an unsupported shopperLocale
, the default language (English - US) will be used. If you have many of these shoppers in a specific locale, you may want to create a localization.
Customize localization
To customize the fields shown for a translation, pass a configObject
to chckt.checkout
.
Include the Checkout fields that you want to customize, and for each, specify:
- the
shopperLocale
- the translation you want to customize. - the custom string you want to present to the shopper.
The following example shows how to customize the "Delivery Address" (deliveryAddress
) Checkout field to display:
- "Shipping Address" to US English shoppers.
- "Verzendadres" to Dutch shoppers.
var translationObject = {
'deliveryAddress': {
'en_US': 'Shipping Address',
'nl_NL': 'Verzendadres'
}
};
var sdkConfigObj = {
translations: translationObject
};
Create localization
To create a localization for a language that is not supported, pass a configObject
to chckt.checkout
.
Creating localizations is available from SDK version 1.5.0 and later.
Include any Checkout fields that you want to localize, and for each, specify:
- the
shopperLocale
- the localization you want to add. - the custom string you want to present to the shopper for this field.
Also include allowAddedLocales
as true.
The following example shows how to create a localization for British English (en_GB
). This localization would show "County" instead of "State or province".
var translationObject = {
'stateOrProvince': {
'en_GB': 'County'
}
};
var sdkConfigObj = {
translations: translationObject,
allowAddedLocales: true
};
Any Checkout fields that you have not specified in your localization will revert to English - US.
Checkout fields
The Checkout fields you can customize, and their default strings, are as follows.
Web SDK versions 1.3.1 and below use a different set of Checkout fields. For a list, see Checkout fields for Web SDK 1.3.1 and below.
Checkout field | Default string (en_US) |
---|---|
billingAddress | "Billing address" |
city | "City" |
country | "Country" |
countryCode | "Country Code" |
creditCard.cvcField.placeholder | "123" |
creditCard.cvcField.title | "CVC / CVV" |
creditCard.expiryDateField.invalid | "Invalid expiration date" |
creditCard.expiryDateField.month | "Month" |
creditCard.expiryDateField.month.placeholder | "MM" |
creditCard.expiryDateField.placeholder | "MM/YY" |
creditCard.expiryDateField.title | "Expiry Date" |
creditCard.expiryDateField.year | "Year" |
creditCard.expiryDateField.year.placeholder | "YY" |
creditCard.holderName.placeholder | "J. Smith" |
creditCard.numberField.invalid | "Invalid card number" |
creditCard.numberField.placeholder | "1234 5678 9012 3456" |
creditCard.numberField.title | "Card Number" |
creditCard.oneClickVerification.invalidInput.title | "Invalid CVC" |
creditCard.storeDetailsButton | "Remember this card for my next payment" |
creditCard.success | "Payment Successful" |
dateOfBirth | "Date of birth" |
deliveryAddress | "Delivery Address" |
error.message.unknown | "An unknown error occurred" |
error.subtitle.payment | "Payment failed" |
error.subtitle.redirect | "Redirect failed" |
error.subtitle.refused | "Payment refused" |
error.title | "Error" |
female | "Female" |
firstName | "First name" |
gender | "Gender" |
holderName | "Cardholder name" |
houseNumberOrName | "House number" |
idealIssuer.selectField.placeholder | "Select your bank" |
idealIssuer.selectField.title | "Bank" |
infix | "Prefix" |
installments | "Number of installments" |
lastName | "Last name" |
male | "Male" |
mobileNumber | "Mobile number" |
payButton | "Pay" |
payment.processing | "Your payment is being processed" |
payment.redirecting | "You will be redirected…" |
paymentMethods.moreMethodsButton | "More payment methods" |
personalDetails | "Personal details" |
postalCode | "Postal code" |
sepa.ibanNumber | "Account Number (IBAN)" |
sepa.ownerName | "Holder Name" |
sepaDirectDebit.ibanField.invalid | "Invalid account number" |
sepaDirectDebit.nameField.placeholder | "J. Smith" |
separateDeliveryAddress | "Specify a separate delivery address" |
shopperEmail | "E-mail address" |
socialSecurityNumber | "Social security number" |
stateOrProvince | "State or province" |
storeDetails | "Save for my next payment" |
street | "Street" |
telephoneNumber | "Telephone number" |
wechatpay.scanqrcode | "Scan the QR code" |
wechatpay.timetopay | "You have %@ to pay" |
Checkout fields for Web SDK 1.3.1 and below
The Checkout fields you can customize, and their default strings, are as follows.
Checkout field | Default string (en_US) |
---|---|
paymentMethods.title | "Payment Methods" |
paymentMethods.storedMethods | "Your payment methods" |
paymentMethods.otherMethods | "Select other method" |
paymentMethods.moreMethodsButton | "More payment methods" |
payButton | "Pay" |
payButton.formatted | "Pay %@" |
cancelButton | "Cancel" |
dismissButton | "OK" |
storeDetails | "Save for my next payment" |
payment.redirecting | "You will be redirected" |
payment.processing | "Your payment is being processed" |
creditCard.title | "Card Details" |
creditCard.holderName | "Cardholder name" |
creditCard.holderName.placeholder | "J. Smith" |
creditCard.numberField.title | "Card Number" |
creditCard.numberField.placeholder | "1234 5678 9012 3456" |
creditCard.numberField.invalid | "Invalid card number" |
creditCard.expiryDateField.title | "Expiry Date" |
creditCard.expiryDateField.placeholder | "MM/YY" |
creditCard.expiryDateField.invalid | "Invalid expiration date" |
creditCard.expiryDateField.month | "Month" |
creditCard.expiryDateField.month.placeholder | "MM" |
creditCard.expiryDateField.year.placeholder | "YY" |
creditCard.expiryDateField.year | "Year" |
creditCard.cvcField.title | "CVC / CVV" |
creditCard.cvcField.placeholder | "123" |
creditCard.installmentsField | "Number of installments" |
creditCard.storeDetailsButton | "Remember this card for my next payment" |
creditCard.oneClickVerification.title | "Verify your card" |
creditCard.oneClickVerification.message | "Please enter the CVC code for %@" |
creditCard.oneClickVerification.invalidInput.title | "Invalid CVC" |
creditCard.oneClickVerification.invalidInput.message | "Please enter a valid CVC to continue." |
sepaDirectDebit.ibanField.title | "Account Number (IBAN)" |
sepaDirectDebit.ibanField.placeholder | "NL53 ABNA 1925 1294 122" |
sepaDirectDebit.ibanField.invalid | "Invalid account number" |
sepaDirectDebit.nameField.title | "Holder Name" |
sepaDirectDebit.nameField.placeholder | "J. Smith" |
sepaDirectDebit.consentButton | "I agree that the amount below will be debited from my bank account." |
sepa.ownerName | "Holder Name" |
sepa.ibanNumber | "Account Number (IBAN)" |
error.title | "Error" |
error.subtitle.redirect | "Redirect failed" |
error.subtitle.payment | "Payment failed" |
error.subtitle.refused | "Payment refused" |
error.message.unknown | "An unknown error occurred" |
error.message.cannotConnectToInternet | "Failed to connect to the internet : please check your internet connection." |
error.message.cannotConnectToHost | "Failed to connect to our payment server." |
error.retryButton | "Try again" |
idealIssuer.selectField.title | "Bank" |
idealIssuer.selectField.placeholder | "Select your bank" |
creditCard.success | "Payment Successful" |
oneClick.confirmationAlert.title | "Confirm %@ payment" |
redirect.cannotOpenApp.title | "Cannot Open App" |
redirect.cannotOpenApp.appNotInstalledMessage | "This app could not be opened because it is not installed on this device." |
holderName | "Cardholder name" |
countryCode | "Country Code" |
telephone.number | "Telephone number" |