Personalizando los campos alojados
Si está utilizando el método de integración Hosted Session, tiene varias formas de personalizar los campos de pago hospedado en su página de pago. Las personalizaciones pueden ayudarlo a hacer coincidir la apariencia de su página de pago y mejorar la accesibilidad de su sitio web.
Aplicar estilos a los campos hospedados
Puede modificar el estilo de los campos de pago hospedado para que coincidan con la apariencia de su página de pago general.
setFocus( ): establece el enfoque en el campo hospedado especificado.setFocusStyle( ): Establece los atributos de estilo para los campos hospedados especificados cuando obtienen el foco.setHoverStyle( ): Establece los atributos de estilo para los campos hospedados especificados cuando se pasa el mouse sobre ellos.setPlaceholderStyle( ): Establece los atributos de estilo para el texto del marcador de posición que se muestra en los campos hospedados especificados antes de que el pagador lo reemplace con su propia entrada.setPlaceholderShownStyle( ): establece los atributos de estilo para los campos hospedados especificados cuando el texto del marcador de posición es visible.
Ejemplo de estilo de campo de pago
PaymentSession.setFocus('card.number');
PaymentSession.setFocusStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setHoverStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setPlaceholderStyle(["card.number", "card.nameOnCard"], {
color: 'blue',
fontWeight: 'bold',
textDecoration: 'underline'
});
PaymentSession.setPlaceholderShownStyle(["card.number", "card.nameOnCard"], {
color: 'green',
fontWeight: 'bold',
textDecoration: 'underline'
});
Uso de campos desplegables
Si admite pagos con tarjeta de crédito, puede utilizar valores desplegables para los campos hospedados que definen el mes y año de vencimiento de la tarjeta.
El siguiente código de muestra muestra cómo definir los campos desplegables dentro de los campos hospedados de su página de pago para un pago con tarjeta de crédito.
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://paymentgateway.commbank.com.au/form/version/72/merchant/<MERCHANTID>/session.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>
<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->
<div>Please enter your payment details:</div>
<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly></div>
<div>Expiry Month:
<select id="expiry-month" class="form-control input-md" required="" readonly>
<option value="">Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div>Expiry Year:
<select id="expiry-year" class="form-control input-md" required="" readonly>
<option value="">Select Year</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
</select>
</div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="4" readonly></div>
<div>Cardholder Name:<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="3" readonly></div>
<div><button id="payButton" onclick="pay();">Pay Now</button></div>
</script>
</body>
</html>
Configurar la accesibilidad
La Hosted Session proporciona funcionalidad para mejorar la accesibilidad de su sitio web. Para obtener más información sobre la accesibilidad del sitio web, consulte .
Configurar el idioma de la página de pago
Para configurar el idioma de su página de pago general, agregue el atributo lang al elemento <html>. Definir el idioma de la página ayuda a las tecnologías de asistencia a representar el texto con mayor precisión.
<html lang="en">
<head></head>
<body></body>
</html>
Configuración regional del campo hospedado
Para definir la configuración regional (idioma y región) de sus campos hospedados, agregue el argumento locale a la función PaymentSession.configure() utilizada para configurar su sesión.
Cuando define la configuración regional del campo hospedado, la biblioteca Session JavaScript proporciona traducciones aplicables para todos los elementos textuales relacionados con los campos hospedados, incluidas etiquetas ocultas y mensajes de error. Si la configuración regional no está configurada, el valor predeterminado es inglés (en_US).
Los valores locales admitidos son de_DE, el_GR, en_US, es_MX, es_ES, fr_CA, fr_FR, it_IT, ja_JA, pl_PL, pt_BR, ro_RO y zh_CN.
lang) coincida con la localización de los campos hospedados.
PaymentSession.configure({
fields: {
card: {
nameOnCard: cardHolderNameField ? "#card-holder-name" : null,
number: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year"
}
},
frameEmbeddingMitigation: ["javascript"],
locale:"fr",
callbacks: {
}
});
Mejorar la experiencia del usuario para los campos hospedados
Las siguientes opciones permiten controlar mejor la experiencia de usuario para pagadores con necesidades de accesibilidad:
- Configuración del título del iFrame
El atributo de título del iFrame del campo hospedado se puede controlar utilizando el atributo de título del campo. El título representa información de asesoramiento para el campo, como información de la herramienta.
- Configuración de atributos ARIA (Accessibility Rich Internet Application)
La Hosted Session admite varios atributos aria-*, que puede utilizar para permitir que las tecnologías de asistencia ayuden al pagador. Por ejemplo, el atributo aria-label proporciona una etiqueta que la tecnología de asistencia puede leer para identificar el campo hospedado para el pagador.
- Configuración del parámetro de visualización para caracteres no válidos
Considere aceptar todos los caracteres en los campos hospedados para una mejor experiencia de usuario al utilizar tecnología de asistencia. Para hacer esto, establezca
interaction.displayControl.invalidFieldCharacters=ALLOWdentro del argumento del objeto de configuración de la funciónPaymentSession.configure(). - Configuración de etiquetas ocultas y mensajes de error
Todos los campos hospedados contienen una etiqueta oculta y todos los campos hospedados obligatorios contienen un mensaje de error oculto. Cualquier error por invocar la función
PaymentSession.updateSessionFromForm()genera una etiqueta de mensaje de error. Además, puede generar sus propios errores mediante la funciónPaymentSession.setMessage().Por ejemplo, la etiqueta oculta para el campo de número de tarjeta es Número de tarjeta. El mensaje de error oculto para el número de tarjeta que falta es Falta el número de tarjeta, ingrese el valor. El mensaje de error oculto para un número de tarjeta no válido es El número de tarjeta no es válido, ingrese el valor correcto. Al desplazarse entre los campos hospedados, el lector de pantalla lee solo la etiqueta oculta y el mensaje de error oculto, no la etiqueta o el mensaje de error reales que se muestran en la página.
<!-- CREATE THE HTML FOR THE PAYMENT PAGE --> <div>Please enter your payment details:</div> <div>Cardholder Name: <input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="1" readonly></div> <div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="2" readonly></div> <div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="3" readonly></div> <div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="4" readonly></div> <div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="card security code" value="" tabindex="5" readonly></div> <div><button id="payButton" onclick="pay();">Pay Now</button></div>
Manejo del enfoque de campo
El comportamiento predeterminado de enfoque automático de HTML5 no funciona con campos hospedados: cuando el pagador hace clic en la etiqueta, el foco no se mueve automáticamente al elemento de entrada correspondiente.
Para garantizar la funcionalidad de enfoque correcta en su página, utilice la función setFocus() de la biblioteca Session JavaScript.