Destacar varios medios de pago
Puede destacar varios pagos sin importar el modo de presentación elegido:
Esta función le permite posicionar varios botones de un modo de pago donde desee en su página.
Integración
- Utilice la clase kr-smart-button ;
- Agregar el atributo kr-payment-method para elegir un medio de pago.
Consulte la tabla de valores del atributo kr-método-de-pago.
Caso para 2 botones de pago:
Aplique 2DIV, uno por botón.
Estos/estas 2DIVse superponen en unDIV PARENTpara aplicar un estilo CSS.
Ejemplo: .
<!-- DIV select payment method -->
<div>
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
(...)
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
(...)
</div>Caso de uso: resaltar Paypal y Apple Pay
A continuación se muestra un ejemplo del método de pago Paypal y Apple Pay, en modo lista con tarjeta integrada.
Para más información, puede utilizarCSS Flexboxpara crear el diseño de su página y colocar correctamente los botones de forma de pago.
Para más información, consulte el siguiente enlace:CSS Flexbox.
. Ejemplo de código:
<head>
(...)
<!-- link Bootstrap -->
</head>
<style type="text/css">
/*Flexbox direction row*/
.container {
display: flex;
flex-direction: row;
}
/*Change the button : width, border*/
.container .kr-smart-button {
width : 75% !important;
border-style: solid;
border-color: orange;
}
/*Gap between the container and the div*/
.container>div {
margin: 0 100px;
flex: 1;
}
</style>
<body>
<!-- payment form -->
<div class="container">
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">
</div>
<div>
<div class="kr-smart-button" kr-payment-method="PAYPAL">
</div>
<div class="kr-smart-button" kr-payment-method="APPLE_PAY">
</div>
</div>
</div>
</body>