The custom integration allows you to use any HTML element or JavaScript event to trigger the payment information modal. The custom solution requires some Javascript skills but allows you to customize your payment or subscription sign-up flow. See example on the right.
The Javsacript is included and a handler is instantiated by a configure object. Here you can also bind callbacks. The token
is what will happen when you receive the result and the ready
is if you want something to happen when our frame is ready to be opened. The bind of the click event listener is the binding to the open button so you can actually open our frame.
<script src="https://token.reepay.com/token.js”></script>
<form id="signupform">
<input type="hidden" id="token" name="reepay-token"/>
<input type="submit" id="signup-button" disabled="disbaled" value="Sign-up"/>
</form>
Instantiate handler with a configure object
// Instantiate handler
var handler = reepaytoken.configure({
key: 'pub_11111111111111111111111111111111',
language: 'da',
recurring: true,
token: function(result) {
console.log(JSON.stringify(result));
document.querySelector('#token').value = result.token;
document.getElementById('signupform').submit();
},
ready: function() {
document.querySelector('#signup-button').removeAttribute('disabled');
},
close: function() {
console.log('Modal closed');
}
});
// Open modal on open button click
document.querySelector('#open-button').addEventListener('click', function(event) {
event.preventDefault();
handler.open();
});
Configuration options
The handler must be configured with the following mandatory parameters.
Parameter | Description |
---|---|
key | Your account public key. Can be found in the administration under Developers -> API credentials -> Public API keys |
token | Callback invoked when the user has entered payment information. |
The handler can be configured with the following optional parameters.
Parameter | Description |
---|---|
language | The language to use. The following languages are supported en , da , se , no , de , es , fr , it , nl and pirate . Defaults to English. |
buttonText | The text on the button inside the token layer. The default is “Pay” is the language determined by the language parameter. |
ready | Callback invoked when the Token solution is ready. |
close | Callback invoked if the Token layer is closed instead of entering payment information. |
recurring | Whether the token is to be used for recurring payment on a subscription or for a one-time charge. Must be true or false . Defaults to true . |
In addition to the above arguments the following payment intent parameters must be provided to enable Strong Customer Authentication (SCA), e.g. 3D Secure and Secured by Nets, for one-time payments (recurring=false
). Notice that using recurring=true
does not require additional parameters to enable SCA.
Argument | Description |
---|---|
orderId | An orderId of maximum 22 characters. Must match the charge handle used in the subsequent charge call. |
orderText | Short order text shown in SCA flow. |
amount | Amount in minor unit (e.g. 100 for 1.00€). Must match the amount used in the subsequent charge call. |
currency | Currency used in ISO 4217 format. Must match the currency in the subsequent charge call or the account default if none provided to the charge call. |
Result object
The result object returned to the token callback contains the following attributes.
Attribute | Description |
---|---|
token | Token for the payment information to be used with the Reepay API |
masked_card | Masked card number. The first six and last four digits |
fingerprint | A unique identifier for the credit card number in the case of credit card |
exp_year | Credit card expiration year in the case of credit card |
exp_month | Credit card expiration month in the case of credit card |
card_type | Card type in the case of credit card. Either visa , mc , dankort , visa_dk , visa_elec , maestro , laser , amex , diners , discover or jcb . |
recurring | Whether this token is to be used for subscription sign-up or one-time charge. |
Prevent blocking of Token
Some mobile devices and Internet Explorer will block a call to handler.open()
if is not performed as a result of a user actions, e.g. button click. To avoid this problem only call handler.open()
as a result of user click, and not in a callback or the like.