highlighting several payment methods
The highlighting of several payments is possible whatever the chosen display mode:
This function allows you to position several buttons of a payment method where you want 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.
Case for 2 payment buttons
Implement 2DIV,one per button.
These 2DIVare then nested in aDIV PARENTto apply a CSS style.
Example: .
<!-- 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>Use Case: Highlight Paypal and Apple Pay
Below is an example for the Paypal and Apple Pay 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;
}
/*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>