Personalizing the "Pay" button
The payment button is automatically added to your form using the following code:
There are numerous benefits to using our payment button:
- The labels are translated automatically.
- The amount is automatically formatted and updated.
- We handle the pending transition animation for you
- The button automatically changes to read-only mode if necessary.
It is possible to override the payment button by proceeding to the:
Personalize the name
If you want to manage the button label yourself, all you need to do is add it as follows:
<button class="kr-payment-button">Custom label</button>
You can also insert a variable that represents the amount and currency. The JavaScript client will automatically replace them:
<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>
Personalize the color
The "Pay" button is placed in the <div class="kr-embedded"> container. The style of the "Pay" button is defined by the kr-payment-button class.
To override the color of the "Pay" button, it is recommended to set the new style in the <HEAD> tag of your payment page, right after the theme and Javascript code are loaded.
Here is an example using the css rule !important.
<head>
<!-- Javascript library. Should be loaded in head section -->
<script type="text/javascript"
src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
</script>
<!-- theme and plugins. should be loaded in the HEAD section -->
<link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic.js"></script>
<!-- Overrride payment button background color -->
<style type="text/css">
.kr-embedded .kr-payment-button {
background-color: #00D152 !important;
}
</style>
</head>
<body>
...
</body>