JavaScript SDK || Payment Method Registration

Register a new card for use. If this is the initial registration of a card, it is possible to optionally create a transaction on behalf of that Customer.


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.

atpay.register(form object, callback)

Attribute Description
form object The form element on your page that accepts card information, or a javascript object containing the card details by name
callback Function to call when the card registration fails or succeeds

After a card has been successfully registered, you will receive the following information in the response argument to your callback function.

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"
                                               }
}
Attribute Description
atpay_token The reference used to charge this card in the future. You should store this value safely on your server
message The response type
referrer_context The value you passed through the registration process
signature Can be used to verify responses are valid
transaction If you specified an amount, the corresponding transaction details

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>