• France
status page
Demo shops
assistance
FAQContact support
Search
Categories
Tags
Europe (English)
France
Spain
Europe (English)
India
Homepage
Use cases
Create a payment
Create an installment payment
Create a multi-card (split) payment
Create a payment by Alias (Token)
Create a payment link
Create a recurring payment
Manage subscriptions
Manage your transactions (refund, cancel...)
Analyze your reports
API docs
Embedded Form
REST API
Hosted payment
Mobile payment
File exchange
SDD mandates by REST API
Snippets
Payment methods
Plugins
Marketplace
Guides
Merchant Back Office
Back Office Expert
Functional guides

highlighting several payment methods

The highlighting of several payments is possible whatever the chosen display mode:

  • list mode;
  • pop-in mode;
  • list mode with embedded card form.

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 2DIVsont ensuite imbriquées dans uneDIV 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.

Apple Pay is only compatible with the Safari browser, available on Apple brand computers and phones (Mac, iPhone and iPad).

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>
Jobs
Legal
GDPR
25.22-1.11