Highlight a payment method
The payment method can be highlighted regardless of the display mode:
This function allows you to position the button of a payment method where you want it on your page.
Integration
- Use the kr-smart-button class;
- add kr-payment-method attribute to choose a payment method.
See the table of values for the kr-payment-method attribute.
Code sample
<!-- DIV select payment method -->
<div class="kr-smart-button" kr-payment-method="[SELECTED PAYMENT METHOD]"></div>
Use case: highlighting the SEPA Credit Transfer (Payment Initiation)
Here is an example for the SEPA Wire Transfer payment method (Payment Initiation), in list mode with embedded card.
For information, you can useCSS Flexboxto create your layout and correctly position the payment method buttons.
For more information, click here:CSS Flexbox.
. Code sample:
<head> (...) <!-- link Bootstrap --> </head> <style type="text/css"> /*Flexbox direction row*/ .container { display: flex; flex-direction: row !important; } /*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 class="kr-smart-button" kr-payment-method="IP_WIRE">Payer avec sa banque</div> </div> </body>