Nummuspay.js Javascript Library

Nummuspay JavaScript implementation removes compliance responsibilities, allows you to fully customize the end-user experience, and unlocks the power of Nummuspay API without having worries about PCI Compliance. This would require minimal development effort from your side. With Nummuspay.js javascript library you can collect sensitive information from the user and create representative Tokens for safely sending that data to your servers. All sensitive information is handled by Nummuspay. js, which is fully PCI Compliant.

To get started, include this script on your html page:

<script src="https://api.nummuspay.com/Content/js/v1/nummuspay.js"></script>

There are 2 different scenarios available to use.

1^st Scenario: Checkout page will appear on your website using pop up:

In this scenario you have to add your Company, your Project, set up a payment method and create a checkout page on Nummuspay dashboard. Checkout pages are created automatically when you create a product, but you can create your own checkout page manually, as well. The second step will be to run the following script on your html page:

<script>
    Nummuspay.Checkout({
        publicCheckoutPageID: YOUR_CHECKOUT_PAGE_ID
    });
</script>

You can find your checkout page ID by visiting your check out page on nummuspay dashboard.

Note that if you are planning to add paypal on you custom checkout form using javascript library you have to put the following tag on your html page:

<div id="YOUR_DIV_ID"></div>

After doing this step, you have to put the following script, as well:

<script>
    Nummuspay.Paypal({
        divID: 'YOUR_DIV_ID',
        publicCheckoutPageID: YOUR_CHECKOUT_PAGE_ID,
        productID: YOUR_PRODUCT_ID,
        productQuantity: YOUR_PRODUCT_QUANTITY,
        customerToken: 'YOUR_CUSTOMER_TOKEN',
        showOnlyPaymentUI: true
    });
</script>

The following parameters can be used in javascript function Nummuspay.Checkout:

*You can find customer token by checking customer panel on nummuspay dashboard or via API. 

2nd Scenario: Checkout page will appear directly on your website using custom button and passes a Nummuspay token  to a JavaScript callback:

Any merchant or service merchant provider who want to use this scenario has to be PCI – DSS compliant (SAQ A). To securely collect card details from your customers, you need to place the "data-nummuspay" tag to each of your fields containing customer and credit card details, as the example below:

<input type="email" data-nummuspay="email" placeholder="e-mail">
<input type="text" data-nummuspay="firstName" placeholder="first name">
<input type="text" data-nummuspay="lastName" placeholder="last name">
<input type="text" data-nummuspay="billingAddress" placeholder="billing address">
<input type="text" data-nummuspay="zip" placeholder="zip">
<input type="number" data-nummuspay="number" placeholder="number">
<input type="number" data-nummuspay="month" placeholder="month">
<input type="number" data-nummuspay="year" placeholder="year">
<input type="number" data-nummuspay="cvv" placeholder="cvv">

The following parameters can be used in order to create token:

The payment details collected using our library can then be converted into a token, using a handler function like this one:

<script>
    function createToken() {
        Nummuspay.SetPublicKey('YOUR_PUBLIC_KEY');

        Nummuspay.CreateToken().done(function (token) {
            console.log(token);
        }).fail(function (error) {
            console.log(error);
        });
    }
</script>

Go to Nummuspay dashboard -> Management console -> Security and copy the Public Key. 

Paste the Public Key on the javascript. Sends billing information to Nummuspay to store as a token, sending that the credit card token back to you. Once Nummuspay.js has stored your customer's sensitive data and given you a credit card token, you will have 30 minutes to use it in our API. Expired tokens are permanently removed from the Nummuspay servers. In case you want to process multiple charges manually (for example using usage based billing scenarios), you have to use a permanent token which is created the same time with the temporary token. There are 2 different ways to obtain a permanent token:

1.       Go to https://api.nummuspay.com/docs/index#!/Charge/Charge_Post and send request using the temporary token.

2.       Go to https://api.nummuspay.com/docs/index#!/Customers/Customers_Get and add the customer ID into search field.  

An API callback is always required. Visit https://api.nummuspay.com/docs/index#!/Charge/Charge_Post in order to complete this step.

Alternatively, you can use Direct credit card tokenization using JS:

You can use any of the parameters as above

In this case go to Nummuspay dashboard -> Management console -> Security and copy the Public Key. Paste the Public Key on the following javascript:

<script>
    function createTokenDirect() {
        Nummuspay.SetPublicKey('YOUR_PUBLIC_KEY');

        var data = {
            email: 'john@example.com',
            firstName: 'John',
            lastName: 'Doe',
            billingAddress: '1st Street 77',
            zip: '12345',
            number: '4242424242424242',
            month: '10',
            year: '2020',
            cvv: '735'
        };

        Nummuspay.CreateToken(data).done(function (token) {
            console.log(token);
        }).fail(function (error) {
            console.log(error);
        });
    }
</script>

Checkout page examples:

- Product selection

<script>
    Nummuspay.Checkout({
        'PublicCheckoutPage.ID': 1
    });
</script>

- Customer info (with selected product)

<script>
    Nummuspay.Checkout({
        'PublicCheckoutPage.ID': YOUR_CHECKOUT_PAGE_ID,
        'CartProducts[0].ID': YOUR_PRODUCT_ID,
        'CartProducts[0].Quantity': YOUR_PRODUCT_QUANTITY
    });
</script>

- Payment method selection (with selected product and customer)

<script>
    Nummuspay.Checkout({
        'PublicCheckoutPage.ID': YOUR_CHECKOUT_PAGE_ID,
        'CartProducts[0].ID': YOUR_PRODUCT_ID,
        'CartProducts[0].Quantity': YOUR_PRODUCT_QUANTITY,
        'Customer.Token': YOUR_CUSTOMER_TOKEN
    });
</script>

- Payment method selection (with selected new products, customer and vendor with custom amount/percent)

<script>
    Nummuspay.Checkout({
        'PublicCheckoutPage.ID': YOUR_CHECKOUT_PAGE_ID,
        'CartProducts[0].ProductType': YOUR_PRODUCT_TYPE,
        'CartProducts[0].Title': YOUR_PRODUCT_TITLE,
        'CartProducts[0].Description': YOUR_PRODUCT_DESCRIPTION,
        'CartProducts[0].Price': YOUR_PRODUCT_PRICE,
        'CartProducts[0].Quantity': YOUR_PRODUCT_QUANTITY,
        'CartProducts[0].Vendors[0].ID': YOUR_VENDOR_ID,
        'CartProducts[0].Vendors[0].CommisionAmountOverride': YOUR_VENDORS_AMOUNT,
        'CartProducts[1].ProductType': YOUR_PRODUCT_TYPE,
        'CartProducts[1].Title': YOUR_PRODUCT_TITLE,
        'CartProducts[1].Description': YOUR_PRODUCT_DESCRIPTION,
        'CartProducts[1].Price': YOUR_PRODUCT_PRICE,
        'CartProducts[1].Quantity': YOUR_PRODUCT_QUANTITY,
        'CartProducts[1].Vendors[0].ID': YOUR_VENDOR_ID,
        'CartProducts[1].Vendors[0].CommisionPercentOverride': YOUR_VENDORS_PERCENT,
        'Customer.Token': YOUR_CUSTOMER_TOKEN
    });
</script>