Description

Creates a new credit card record with @Pay and provides a token which can be used for future transactions against it. If the form contains a field called ‘amount’, @Pay will also process a transaction for this amount.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script type="text/javascript">

   // For initial registration.
   $(document).ready(function() {
       $("#form-id").submit(function(e) {
          e.preventDefault();
          atpay.register("#form-id",function(response){
            // validate response
          });
       });
    });

   // For updating a registered card.
   $(document).ready(function() {
       $("#form-id").submit(function(e) {
          e.preventDefault();
          atpay.update("#form-id",function(response){
            // validate response
          })
       });
    });

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  atpay_token:               "XYZ",
  message:                       "registration_response",
  referrer_context:     "sku-11",
  signature:                     "a5ac216fd6d43c424da4e743291ac01e87b9a414",
  transaction:                {
        balance:                          "40.0",
        created_at:                    "2013-08-12 00:00:00 -0600",
        fee:                                    "0.0",
        id:                                       "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
        signature:                      "b6bd327ge7e53c424da4e33256adccf82lsla1xy"
                                               }
}

The Registration Form

The form you implement to accept credit card information is hosted on your site. @Pay’s SDK will wrap your form submission process to first post sensitive information to our PCI compliant servers, and then remove that information from your form so you can submit it to your server:

1. Your customer visits a page on your site with an @Pay enabled form.
2. Your customer enters credit card information and billing information into this form.
3. Upon submission, @Pay submits the credit card and billing information to our servers.
4. If the transaction is successful, we append a card reference token to your form.
5. We remove the sensitive information (fields marked with ‘atpay-data-protected’)
6. Your form submission process carries on as normal, without the sensitive information.

Since @Pay’s SDK is designed to work with your existing forms, we understand that the names of your fields may differ from @Pay’s expectations. Instead of using the name attribute, @Pay’s SDK uses the data-atpay attribute to determine the name of a field.

data-atpay-protected - Any input field without a name attribute is not submitted to your server when a customer clicks ‘Submit’, but as an additional safeguard, adding the data-atpay-protected attribute will ensure that @Pay’s SDK removes the form element prior to submission.

Example Form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<form action="/submit" method="POST" id="registration-form">
  <!-- phone number is passed to @Pay as 'phone', and to your server as 'phone_number' -->
  <input type="text" name="phone_number" data-atpay="phone" />

  <input type="text" name="first" data-atpay="first_name" />
  <input type="text" name="last" data-atpay="last_name" />
  <input type="text" name="email" data-atpay="email" />
  <input type="text" name="street" data-atpay="street" />
  <input type="text" name="city" data-atpay="city" />
  <input type="text" name="state" data-atpay="state" />
  <input type="text" name="zip" data-atpay="zip" />
  <input type="text" name="country" data-atpay="country" value="United States" />
  <input type="text" name="phone" data-atpay="phone" />

  <input type="text" data-atpay="card_number" data-atpay-protected="true" />
  <input type="text" data-atpay="card_type" />
  <input type="text" data-atpay="exp_month" />
  <input type="text" data-atpay="exp_year" />
  <input type="text" data-atpay="cvc" data-atpay-protected="true" />

  <input type="submit" />
</form>