Smart2Pay JS – SDK Installation

Several JavaScript API implementations are available here https://github.com/Smart2Pay/js-sdk/tree/main/src to obtain the CreditCardToken. You can also checkout our implementation examples here: https://github.com/Smart2Pay/js-sdk/blob/main/src/example.html. See below the details for ES6 – fetch + Promise, ES6 – Promise + XMLHttpRequest or ES5 – XMLHttpRequest.

ES6 – fetch + Promise

Installation
Import the following script that will make available tokenizeCard_fetch():

<script src="https://..../tokenizeCard_fetch.js" type="text/javascript"></script>

Usage

Use tokenizeCard_fetch to send the required data and handle response / error:

tokenizeCard_fetch({
    apiKey: '<apikey string>',
    environment: '<environment string>',
    cardDetails: '<cardDetails object>',
})  
.then(CreditCardToken => console.log(CreditCardToken)) // use received 'CreditCardToken'
.catch(err => console.error(err)) // handle error
Parameter Type Possible Values Description
apiKey string API key previously obtained from S2P server
environment string ‘DEV’
‘TEST’
‘LIVE’
select the environment
DEV
http://localhost/v1/card/authenticate
TEST
https://securetest.smart2pay.com/v1/card/authenticate
LIVE
https://secure.smart2pay.com/v1/card/authenticate
cardDetails JSON object check sample bellow card authentication details in JSON format

Sample card details object:


{
    "CardAuthentication": {
        "Customer": {
            "FirstName": "John",
            "LastName": "Doe",
            "Email": "testing2@test.com",
            "SocialSecurityNumber": "00003456789"
        },
        "BillingAddress": {
            "Country": "BR"
        },
        "Card": {
            "HolderName": "John Doe",
            "Number": "4111111111111111",
            "ExpirationMonth": "02",
            "ExpirationYear": "2029",
            "SecurityCode": "312"
        }
    }
}

ES6 – Promise + XMLHttpRequest

Installation
Import the following script that will make available tokenizeCard_fetch():

<script src="https://..../tokenizeCard_promise.js" type="text/javascript"></script>

Usage

Use tokenizeCard_promise to send the required data and handle response / error:

tokenizeCard_promise({
    apiKey: '<apikey string>',
    environment: '<environment string>',
    cardDetails: '<cardDetails object>',
})
.then(function (CreditCardToken) {
    // use received 'CreditCardToken'
    console.log(CreditCardToken);
})
.catch(function (err) {
    // handle error
    console.error(err.status, err.statusText);
});
Parameter Type Possible Values Description
apiKey string API key previously obtained from S2P server
environment string ‘DEV’
‘TEST’
‘LIVE’
select the environment
DEV
http://localhost/v1/card/authenticate
TEST
https://securetest.smart2pay.com/v1/card/authenticate
LIVE
https://secure.smart2pay.com/v1/card/authenticate
cardDetails JSON object check sample bellow card authentication details in JSON format

Sample card details object:


{
    "CardAuthentication": {
        "Customer": {
            "FirstName": "John",
            "LastName": "Doe",
            "Email": "testing2@test.com",
            "SocialSecurityNumber": "00003456789"
        },
        "BillingAddress": {
            "Country": "BR"
        },
        "Card": {
            "HolderName": "John Doe",
            "Number": "4111111111111111",
            "ExpirationMonth": "02",
            "ExpirationYear": "2029",
            "SecurityCode": "312"
        }
    }
}

ES5 – XMLHttpRequest

Installation
Import the following script that will make available tokenizeCard():

<script src="https://..../tokenizeCard.js" type="text/javascript"></script>

ES5 – Usage

Create a function where you handle the received CreditCardToken:

function handleRequest(CreditCardToken) {
    // use received 'CreditCardToken'
    console.log(CreditCardToken);
}

Create a function to handle any received errors:

function handleError(HttpStatusCode, errorText) {
    // handle error
    console.error(HttpStatusCode, errorText);
}

Use tokenizeCard() to send the required data and handlers:

tokenizeCard({
    apiKey: '<𝘢𝘱𝘪𝘬𝘦𝘺 𝘴𝘵𝘳𝘪𝘯𝘨>', 
    environment: '<𝘦𝘯𝘷𝘪𝘳𝘰𝘯𝘮𝘦𝘯𝘵 𝘴𝘵𝘳𝘪𝘯𝘨>',
    cardDetails: '<𝘤𝘢𝘳𝘥𝘋𝘦𝘵𝘢𝘪𝘭𝘴 𝘰𝘣𝘫𝘦𝘤𝘵>',
    handleRequest: '<𝘩𝘢𝘯𝘥𝘭𝘦𝘙𝘦𝘲𝘶𝘦𝘴𝘵 𝘤𝘢𝘭𝘭𝘣𝘢𝘤𝘬>',
    handleError: '<𝘩𝘢𝘯𝘥𝘭𝘦𝘌𝘳𝘳𝘰𝘳 𝘤𝘢𝘭𝘭𝘣𝘢𝘤𝘬>'
});
Parameter Type Possible Values Description
apiKey string API key previously obtained from S2P server
environment string ‘DEV’
‘TEST’
‘LIVE’
select the environment
DEV
http://localhost/v1/card/authenticate
TEST
https://securetest.smart2pay.com/v1/card/authenticate
LIVE
https://secure.smart2pay.com/v1/card/authenticate
cardDetails JSON object check sample bellow card authentication details in JSON format
handleRequest callback function a Javascript function that will receive CreditCardToken as a parameter
handleError callback function a Javascript function that will receive an error code: HttpStatusCode and errorText parameters

Sample card details object:


{
    "CardAuthentication": {
        "Customer": {
            "FirstName": "John",
            "LastName": "Doe",
            "Email": "testing2@test.com",
            "SocialSecurityNumber": "00003456789"
        },
        "BillingAddress": {
            "Country": "BR"
        },
        "Card": {
            "HolderName": "John Doe",
            "Number": "4111111111111111",
            "ExpirationMonth": "02",
            "ExpirationYear": "2029",
            "SecurityCode": "312"
        }
    }
}

Smart2Pay JS – SDK Instructions

Smart2Pay JS – SDK is available here: https://github.com/Smart2Pay/js-sdk.

The interaction flow is described next:

  1. Upon order initiation from the customer
  2. Your server asks our server for a temporary API Key at entry point api/authorization/apikey:

    Request:

    POST https://securetest.smart2pay.com/v1/authorization/apikey
    Authorization: Basic MzAyMDE6aEo1Um9iWXg5cjdGZk53Q3ZIWTlMWEhxcXIrRkV6cmM3YUp2UVFrNEdhejFtZzdSeXk=
  3. Our server responds with a temporary API Key:

    Response:

    HTTP/1.1 201 Created
    Content-Type: application/json; charset=utf-8
    
    {
      "ApiKey": {
        "Value": "MzAwMDc6M2FkODVhYzctNjhlNS00MTA2LTliNjctNTg3MmM1ZmI2ZDNiLTYzMzA=",
        "Created": "20181206141407",
        "LifeTime": 30,
        "AccessCounterLimit": 10,
        "Status": {
          "ID": 2,
          "Info": "Success",
          "Reasons": []
        }
      }
    }
  4. The temporary API Key must be passed to the site.
  5. Collect from your site the credit card details from which you build a cardDetails object and pass it to our SDK together with the temporary API key obtained in the previous step. Any error will be available inside the promise’s catch method.
    tokenizeCard_fetch({
        apiKey: '<apikey string>',
        environment: '<environment string>',
        cardDetails: '<cardDetails object>',
    })
        .then(CreditCardToken => console.log(CreditCardToken))
        .catch(err => console.error(err))
    

  6. Our SDK sends these details to our server.
  7. The server responds with a token to our SDK.
  8. Our SDK makes the credit card token available inside the tokenizeCard_fetch promise’s response.
  9. The order can now be submitted from the site to your server together with the token.
  10. A credit card transaction using the token is now initiated from your server. For more details go to: Recurring Card Payments section. You can store the token on your server for subsequent purchases.
  11. Our server responds to your server with the Authorization result. Upon a successful result you can release the goods or services.
  12. You pass the payment result to your site.

SDK is now fully functional in your app!