JSFiddle - React, Tailwind, and code Playground

by pseudonumos

HTML

<h3>PAYMENTS API</h3>
<pre>
CREATE A NEW CARD    
    DEFINITION
    POST https://payments.kloudless.com/v1/{USER_ID}/cards

    EXAMPLE REQUEST
    curl https://payments.kloudless.com/v1/10/cards \
       -u 10:FePt/5ITiT9yveT8QF5JxQPGouSzEvYJ \
       -d number=0000000012345678 \
       -d exp_month=1 \
       -d exp_year=16 \
       -d cvc=777 \
       -d postal=11235

    EXAMPLE RESPONSE
    {
        “card_id”: “card_1034MY2eZvKYlo2CNdPY56DY”
    }
    
    EXAMPLE ERRORS
    {
        “card_id”: “card_1034MY2eZvKYlo2CNdPY56DY”,
        “code”: “existing_card”
    },
    {
        “code”: “invalid_card”
    }    

CREATE A NEW CHARGE
    DEFINITION
    POST https://payments.kloudless.com/v1/charges

    EXAMPLE REQUEST
    curl https://payments.kloudless.com/v1/charges \
       -u 10:FePt/5ITiT9yveT8QF5JxQPGouSzEvYJ \
       -d amount=150.25 \
       -d card=card_1034MY2eZvKYlo2CNdPY56DY \
       -d “description=Charge for Bill”

    EXAMPLE RESPONSE
    {
        “id”: “ch_1034MO2eZvKYlo2CuTtwPRGp”,
        “created”: 1386294277,
        “amount”: 150.25
    }
    
    EXAMPLE ERRORS
    {
        “id”: “ch_1034MO2eZvKYlo2CuTtwPRGp”,
        “code”: “card_declined”
    },
    {
        “code”: “invalid_card”
    }
</pre>
<h3>jQuery AJAX</h3>
<table class="src" cellpadding="5" cellspacing="5">
    <tr>
        <td><pre>
<i>$</i>.ajax( options )
</pre>
        </td>
    </tr>
</table>
<table class="src" border="1" cellpadding="5" cellspacing="0" width="100%">
    <tr>
        <th width="25%">Option</th>
        <th width="75%">Description</th>
    </tr>
    <tr>
        <td>async</td>
        <td>A Boolean indicating whether to perform the request asynchronously. The default value is true.</td>
    </tr>
    <tr>
        <td>beforeSend</td>
        <td>A callback function that is executed before the request is sent.</td>
    </tr>
    <tr>
        <td>complete</td>
        <td>A callback function that executes whenever the request finishes.</td>
    </tr>
  ...

JavaScript

/**
 *
 *    Description: Kloudless is hosting/sponsoring a charity for the relief effort in the Philippines.
 *    We will be adding a donate button to the chrome extension.  However, none of the client code
 *    currently handles transactions with our secure payments provider.
 *
 *    Goal: You will be given javascript objects with a user’s payment information and several 
 *    endpoints from our payments API.  Create a javascript class that handles transactions.
 *
 *    Function Parameters:
 *        var auth = {
 *            “user_id”: 10,
 *            “key”: “FePt/5ITiT9yveT8QF5JxQPGouSzEvYJ”
 *        };
 *        var payment_data = {
 *            “amount”: “150.00”,
 *            “number”: “0000000012345678”,
 *            “expiry”: “01/16”,
 *            “cvc”: “777”,
 *            “postal”: “11235”
 *        };
 *
 **/

/**
 *    Part I. How would you write this class or set of functions to be within its own scope?
 *    What javascript design pattern can you use?
 **/






/**
 *    Part II. Assume your module has a register function bound to a register button on the DOM.
 *    The auth and payment_data parameters are passed in.  Write the function to create a credit card.
 **/



/**
 *    Part II. Assume your module has a donate function bound to a donate button on the DOM.
 *    The auth and payment_data parameters are passed in.  Assuming a user can click the donate
 *    button multiple times, write out the donate function to create a charge on click.
 **/