Labels and placeholders customization

README.md

@@ -86,14 +86,15 @@ const customStyles = {
  },
  },
  labels: {
- cardLabel: 'Número de Tarjeta Personalizado',
- cvvLabel: 'Código de Seguridad',
- expiryMonthLabel: 'Mes de Expiración',
- expiryYearLabel: 'Año de Expiración'
+ nameLabel: 'Titular de la tarjeta',
+ cardLabel: 'Número de tarjeta',
+ cvvLabel: 'CVC/CVV',
+ expiryDateLabel: 'Fecha de expiración',
  },
  placeholders: {
- cardPlaceholder: '0000 0000 0000 0000',
- cvvPlaceholder: '123',
+ namePlaceholder: 'Nombre como aparece en la tarjeta',
+ cardPlaceholder: '1234 1234 1234 1234',
+ cvvPlaceholder: '3-4 dígitos',
  expiryMonthPlaceholder: 'MM',
  expiryYearPlaceholder: 'AA'
  }

src/helpers/skyflow.js

@@ -56,8 +56,8 @@ export async function initSkyflow(
  table: "cards",
  column: "cardholder_name",
  ...collectStylesOptions,
- label: "Titular de la tarjeta",
- placeholder: "Nombre como aparece en la tarjeta",
+ label: collectStylesOptions.labels?.nameLabel,
+ placeholder: collectStylesOptions.placeholders?.namePlaceholder,
  type: Skyflow.ElementType.CARDHOLDER_NAME,
  validations: [lengthMatchRule],
  });
@@ -73,8 +73,8 @@ export async function initSkyflow(
  ...collectStylesOptions.inputStyles,
  base: stylesForCardNumber
  },
- label: "Número de tarjeta",
- placeholder: "1234 1234 1234 1234",
+ label: collectStylesOptions.labels?.cardLabel,
+ placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
  type: Skyflow.ElementType.CARD_NUMBER,
  });
 
@@ -84,8 +84,8 @@ export async function initSkyflow(
  table: "cards",
  column: "cvv",
  ...collectStylesOptions,
- label: "CVC/CVV",
- placeholder: "3-4 dígitos",
+ label: collectStylesOptions.labels?.cvvLabel,
+ placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
  type: Skyflow.ElementType.CVV,
  });
 
@@ -95,8 +95,8 @@ export async function initSkyflow(
  table: "cards",
  column: "expiration_month",
  ...collectStylesOptions,
- label: "Fecha de expiración",
- placeholder: "MM",
+ label: collectStylesOptions.labels?.expiryDateLabel,
+ placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
  type: Skyflow.ElementType.EXPIRATION_MONTH,
  });
 
@@ -107,7 +107,7 @@ export async function initSkyflow(
  column: "expiration_year",
  ...collectStylesOptions,
  label: "",
- placeholder: "AA",
+ placeholder: collectStylesOptions.placeholders?.expiryYearPlaceholder,
  type: Skyflow.ElementType.EXPIRATION_YEAR,
  });
 

src/helpers/styles.js

@@ -46,15 +46,16 @@ export const defaultStyles = {
  },
  },
  labels: {
- cardLabel: '',
- cvvLabel: '',
- expiryMonthLabel: '',
- expiryYearLabel: ''
+ nameLabel: 'Titular de la tarjeta',
+ cardLabel: 'Número de tarjeta',
+ cvvLabel: 'CVC/CVV',
+ expiryDateLabel: 'Fecha de expiración',
  },
  placeholders: {
- cardPlaceholder: '',
- cvvPlaceholder: '',
- expiryMonthPlaceholder: '',
- expiryYearPlaceholder: ''
+ namePlaceholder: 'Nombre como aparece en la tarjeta',
+ cardPlaceholder: '1234 1234 1234 1234',
+ cvvPlaceholder: '3-4 dígitos',
+ expiryMonthPlaceholder: 'MM',
+ expiryYearPlaceholder: 'AA'
  }
 }

src/index-dev.js

@@ -48,16 +48,17 @@ const customStyles = {
  },
  },
  labels: {
- cardLabel: 'Número de Tarjeta Personalizado',
+ nameLabel: 'Nombre de la de Tarjeta',
+ cardLabel: 'Número de Tarjeta',
  cvvLabel: 'Código de Seguridad',
- expiryMonthLabel: 'Mes de Expiración',
- expiryYearLabel: 'Año de Expiración'
+ expiryDateLabel: 'Fecha de Expiración',
  },
  placeholders: {
+ namePlaceholder: 'Nombre como aparece en la tarjeta',
  cardPlaceholder: '0000 0000 0000 0000',
  cvvPlaceholder: '123',
- expiryMonthPlaceholder: 'MM',
- expiryYearPlaceholder: 'AA'
+ expiryMonthPlaceholder: 'Mes',
+ expiryYearPlaceholder: 'Año'
  }
 }