NAV
html

Introduction

Welcome to the Reepay Token how-to guide and documentation. Reepay Token is a Javascript solution that you can use on your site to obtain customer payment information in a secure manner. Entering sensitive payment information (e.g. credit card number) is handled by Reepay in a payment layer on-top of your site, and in exchange you receive a token representing the payment information that can be used when calling our API. The token can be used for the following API operations:

A token can only be used once and expire within a few minutes.

More about our powerful API can be found here.

To see a simple example click the image below. The test card 4111 1111 1111 1111 with expiry date in the future and any three digit CVV can be used.

How it works

Reepay Token uses HTML, JavaScript, and CSS to create an embedded form for entering payment information. Reepay handles the form, validates information and perform tokenization, and then deliver a token back to your site. Sensitive card information is sent directly to Reepay and never touches your site.

Reepay Token has both a simple integration that fits many use-cases, but also a custom integration that gives additional opportunities for integration.

PCI DSS

Processing, transmission, or storage of card data must comply with the Payment Card Industry Data Security Standards (PCI DSS). Reepay is certified as a PCI Level 1 Service Provider. This is the most stringent level of certification available in the payments industry.

PCI compliance for your business is a shared responsibility between Reepay and you. Anybody accepting payments must do so in a PCI compliant manner. The Reepay Token solution uses an Iframe solution where the entering of sensitive data is done on a Reepay hosted page so your system never touches the information. This is the simplest solution for your business to be PCI compliant and only requires the simplest self-assessment called SAQ-A. Notice that your page needs to be behind HTTPS.

When developing payment or sign-up pages always remeber the following best practices in regards to PCI compliance.

Simple Integration

Include script in your sign-up or payment form

<form name="signupform" method="post" action="/signup">
<input type="text" name="name"/>
<script src="https://token.reepay.com/token.js"
    class="reepay-button"
    data-pubkey="pub_11111111111111111111111111111111"
    data-text="Sign-up"
    data-language ="en"
    data-recurring="true"
</script>
</form>

Consider that you have a form on your page either for making a one-time charge or a sign-up form for a subscription. In both cases you will need payment information from your customer. The only thing you have to do is to include Javascript inside your form. See example on the right.

<script src="https://token.reepay.com/token.js" class="reepay-button" data-pubkey="pub_...."></script>

The Javascript will generate a button with the text given in the argument data-text. The button will be given the class in the class argument to let you style the button. When the button is clicked by the user a modal is opened with a payment information form. When the user has entered the information your form is submitted with additional parameter reepay-token and other parameters described below. The information supplied by your customer in the form and the injected parameters can now be used by your backend to create one-time charge or subscription.

Arguments

The following mandatory arguments must be provided to the Javascript

Argument Description
class The style class for the generated button
data-pubkey Your account public key. Can be found in the administration under Developers -> API credentials -> Public API keys

The following optional arguments can be provided to the Javascript

Argument Description
data-text The text on the generated button. Will default to “OK”.
data-language The language to use. The following languages are supported en, da, se, no, de, es, fr, it, nl and pirate. Defaults to English.
data-recurring Whether the token is to be used for recurring payment on a subscription or for a one-time charge. Must be trueor false. Defaults to true.

Return parameters

The Javascript will generate the following return parameters in the form.

Parameter Description
reepay-token A token for the payment information (e.g. credit card) that can be used with the Reepay API
reepay-masked-card-number Masked card number in the case of credit card. The first six and the last four digits are visible and the rest is masked
reepay-fingerprint A unique identifier for the credit card number in the case of credit card. The fingerprint is only returned for subscription sign-ups with recurring: true. For one-time charges the fingerprint is returned when an authorization or instant capture is performed.
reepay-exp-year Credit card expiration year in the case of credit card
reepay-exp-month Credit card expiration month in the case of credit card
reepay-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.

Custom Integration

Include Javascript

<script src="https://token.reepay.com/token.js”></script>

Instantiate handler with a configure object

<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
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();
});

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.

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.
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 trueor false. Defaults to true.

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.

Use of token

Create a one-time charge. See our API documentation

curl -X POST \
-u 'priv_12051dfac75143fc827cf63a87f46df3:' \
-H 'Accept: application/json' \
-H 'Content-Type: application/json' \
-d '{
  "handle": "order-132",
  "amount": 10000,
  "customer_handle": "cust-003",
  "source": "ct_e4926c46be444fcbbc809be06abfd706",
  "settle": false
}' \
https://api.reepay.com/v1/charge

Create a new customer and subscription providing payment method with a card token source. See our API documentation

curl -X POST \
-u 'priv_12051dfac75143fc827cf63a87f46df3:' \
-H 'Accept: application/json' \
-H 'Content-Type: application/json' \
-d '{
  "plan": "gold",
  "signup_method": "source",
  "create_customer": {
    "email": "carl@leone.com",
    "handle": "cust_001"
  },
  "generate_handle": true,
  "soruce": "ct_e4926c46be444fcbbc809be06abfd706"
}' \
https://api.reepay.com/v1/subscription

Once a token has been created it must be used within five minutes. On the right two examples on the use of the token is shown. In the case of a credit card the token will start with ct_. The token is provided in the source parameter.

  1. Create a one-time charge. See use-case description and example code here.
  2. Create a customer and subscription. See use-case description and example code here.

These following Reepay API operations can be used with a token.

Examples

Examples demonstraing the use of Reepay Token can be found here: https://github.com/reepay/reepay-examples/tree/master/reepay-token-example.

See the simple examples in action here. See test cards below.

Testing

Testing can be done using a combination of test cards and specific cvv codes that can be found here.

Supported browsers

The technology used in the Token solution and PCI requirements to only support TLS 1.2 cryptology limits supported browsers to the following:

Support

If you need help with your Reepay Token integration feel free to reach out to us at https://reepay.com by starting dialog in the bottom right corner.