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: highlight Paypal
Below is an example for the Paypal payment method, in list mode with embedded card.
For information, you can useFlexbox in CSSto create your layout and correctly position the payment method buttons.
For more information, click here:Flexbox in CSS.
. 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="PAYPAL"></div>
</div>
</body>