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
, une par bouton.
These 2DIV
sont ensuite imbriquées dans uneDIV PARENT
to 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: highlighting the SEPA Credit Transfer (Payment Initiation) and Apple Pay
Below is an example for the SEPA Wire Transfer payment method (Payment Initiation) and Apple Pay, 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; } /*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="IP_WIRE"> </div> <div class="kr-smart-button" kr-payment-method="APPLE_PAY"> </div> </div> </div> </body>