Configuring the display modes of your payment page
The display functionality called SmartForm offers you the possibility to choose how you want to display your Apple Pay payment button to the buyer.
Configuring this display is very simple. It is done via DIV. Simply use the class provided in the examples.
- Pop-in mode: the buyer clicks on the Pay button and the payment page appears as a Pop-in on your merchant website.
For the configuration, you just have to use the class kr-smart-form and add the attribute kr-popin in a div containing the parameter kr-form-token
Code example:<body> <div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"> (...) </div> </body>
- List mode: the payment page is embedded on your website. All available payment methods are listed.
For the configuration, you just have to use the class kr-smart-form in a div containing the parameter kr-form-token
Code example:<body> <div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"> (...) </div> </body>
- List with embedded card mode: the payment page is embedded on your website. All the available payment methods are listed and the card entry fields are presented open to the buyer.
For the configuration, you just have to use the class kr-smart-form and add the attribute kr-card-form-expanded in a div containing the parameter kr-form-token
Code example:<body> <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"> (...) </div> </body>
Regardless of the configuration, the buyer can complete their entire payment journey without leaving your website.
- Highlight Apple Pay amongst the other payment methods offered by the shop.
Example with the List mode with embedded card
<body> <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div> <!--DIV select one payment method--> (...) <div class="kr-smart-button" kr-payment-method="APPLE_PAY"></div> (...) </body>
the kr-payment-method field also accepts the apple_pay value. - Highlight Apple Pay with other payment methods of your choice.
Example with the List mode with embedded card
<body> <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div> (...) <div> <div class="kr-smart-button" kr-payment-method="APPLE_PAY"></div> (...) <div class="kr-smart-button" kr-payment-method="IP_WIRE"></div> (...) </div> (...) </body>
- Display all the configured payment methods by default.
Example with the List mode with embedded card
<body> <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>