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.

ParameterDescription
keyYour account public key. Can be found in the administration under Developers -> API credentials -> Public API keys
tokenCallback invoked when the user has entered payment information.

The handler can be configured with the following optional parameters.

ParameterDescription
languageThe language to use. The following languages are supported en, da, se, no, de, es, fr, it, nl and pirate. Defaults to English.
buttonTextThe text on the button inside the token layer. The default is “Pay” is the language determined by the language parameter.
readyCallback invoked when the Token solution is ready.
closeCallback invoked if the Token layer is closed instead of entering payment information.
recurringWhether 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.

ArgumentDescription
orderIdAn orderId of maximum 22 characters. Must match the charge handle used in the subsequent charge call.
orderTextShort order text shown in SCA flow.
amountAmount in minor unit (e.g. 100 for 1.00€). Must match the amount used in the subsequent charge call.
currencyCurrency 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.

AttributeDescription
tokenToken for the payment information to be used with the Reepay API
masked_cardMasked card number. The first six and last four digits
fingerprintA unique identifier for the credit card number in the case of credit card
exp_yearCredit card expiration year in the case of credit card
exp_monthCredit card expiration month in the case of credit card
card_typeCard type in the case of credit card. Either visa, mc, dankort, visa_dk, visa_elec, maestro, laser, amex, diners, discover or jcb.
recurringWhether 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.