Using Cybersource to Accept Payments on Your Drupal Site

On this page:

Introduction

The Cybersource module allows MIT staff or students who have registered with Merchant Services to accept credit card payments using a Drupal Cloud webform to submit data to the Cybersource credit card processing service.

The module maps Drupal field names to corresponding Cybersource fields, submits the mapped form data to Cybersource, and saves the response into your webform results. In compliance with MIT policy, credit card information is handled by Cybersource and is not stored within your Drupal Cloud website.

To use this feature, you must first obtain a Cybersource Merchant ID from Merchant Services. If you do not currently have a merchant ID, apply for a new merchant ID through the Merchant Services site.

You will need to complete the following steps.

1. Enable the Cybersource module.
2. Create the webform on your Drupal Cloud site.
3. Add fields to your webform.
4. Enable Cybersource interaction.
5. Test your Cybersource webform.

Enabling the Cybersource Module and Clearing Your Cache

1. Log in to your site.
2. From the Administrator menu, click Modules.
3. Scroll to the Merchant Services section and find the Cybersource module.
4. Check the box in the Enabled column.
5. Scroll to the bottom and click the Save configuration button. After a moment you will # see a green confirmation message at the top.
6. Click Configuration from the Administrator menu.
7. In the Development section, click Performance.
8. Click the Clear all caches button. You will see a green confirmation message at the top.

Creating the Drupal Cloud Webform

1. From the Administrator menu, click Content.
2. Click Add Content, then Webform. Note: If you have an existing form you would like to use skip to “Webform Settings”
   
   
   
3. Enter a Title for your webform, then click Save at the bottom right. The Webform screen will open showing the Form components.
   
   
   Note: Whereas Drupal Cloud allows for web forms to be attached to other content types (such as a basic page), forms created in this way will not work with the Cybersource module. The content type ‘Webform’ must be used.

Adding Fields (components)

• You may add any components to your web form. The only required component is a field to indicate the amount of the purchase. Other common fields include fields for billing and shipping information as well as special merchant defined data fields.
• You can use your own naming conventions for your webform components. In the webform settings you will decide how your Webform fields are mapped to Cybersource fields. You could actually name your fields to match the Cybersource fields. A list is provided later.
• The following field names are reserved for use by the Cybersource module: requestID, paymentOption, card_accountNumber, reasonCode, and decision.
• A sample of common webform components for a Cybersource form is displayed below.
  
  

To add a field:

1. Click in the box with the text New component name.
2. Type a name for your field. You will not be able to change this once the field is added. You can delete the field and add it again if you make a mistake.
3. Choose the field type from the drop down list.
4. Click the check box to make the field mandatory.
5. Click Add to the right.
6. The Edit component page opens allowing you to select options for your component field.
7. Click Save component at the bottom of left of the page.
8. Continue adding fields.
9. Click Save at the bottom left when you are finished adding fields.

• Note: Cybersource uses two uppercase character country codes (e.g. US) for country identification. If your form requires specifying a country, the best method is to add a field with type select options. Within the settings for this field, under the Load a pre-built option list option, select Cybersource Countries for a pre-populated list of country options that will function correctly with Cybersource.

Enabling Interaction with Cybersource

1. To enable Cybersource interaction for you web form, click Form settings and then check the box for Cybersource webform. This will display the Cybersource settings for your form.
   
   
   
2. Apply the following settings
   Shopmit System: Choose Test to forward data to the Cybersource test environment, or Production to forward information to the Cybersource production environment.
   Merchant ID: Enter your merchant ID which you received from MIT Merchant Services.
   Secure Acceptance Profile: Specifying a secure acceptance profile is optional. If you do not specify a profile, the default profile will be used. To specify a secure acceptance profile, enter your Profile ID and Access Key.
3. Click Save configuration to save the form as a Cybersource webform.
4. Click Form components. You will notice that additional hidden webform components have been added.
   1. requestID
   2. paymentOption
   3. card_accountNumber
   4. reasonCode
   5. decision
      These fields are for storing transaction result information from Cybersource and cannot be modified. They are considered reserved fields. If your webform already has components with the same names they will be deleted and replaced with hidden field components when the webform is saved as a Cybersource webform.
5. Click Form settings to return to the configuration screen.
6. Map your fields.

Below the Access Key field you will see a series of fields. These are the fields available in the Cybersource system. For each Cybersource field, select which of your Drupal Cloud webform fields should be mapped to it. When you map a webform field to a Cybersource field, the value in the webform is passed to the Cybersource system to autofill the order form.

The Amount field is required. All others are optional. If, for example, you map your first_name field to the Bill To First Name in Cybersource, your visitor will not have to re-type his or her first name. Any information you do not pass from your webform to Cybersource will need to be typed in by your visitor.
settings for your form.


Cybersource fields

• Amount (required)
• Bill To First Name
• Bill To Last Name
• Bill To Company
• Bill To Street Address 1
• Bill To Street Address 2
• Bill To City
• Bill To State
• Bill To Postal Code
• Bill To Country Note: Cybersource uses two uppercase character country codes.
• Bill To Customer ID
• Bill To Email
• Bill To Phone Number
• Merchant Defined Data 1 – 10

Note: Cybersource lets you create several merchant defined data fields. If you have created these fields in Cybersource, select the Drupal webform components you want to use for Merchant Defined Data fields 1 – 10 respectively.

Some webform components such as select options and grids can store multiple values. Cybersource values are single strings. The Cybersource module encodes multiple values as JSON strings when sending data to Cybersource and decodes them when saving the webform submission data. It is recommended that any webform component that stores multiple values is mapped to a Merchant Defined data field.

Creating a Custom Receipt Page

The default receipt page includes the amount, orderNumber, and any fields you've mapped to Cybersource fields.

To create a custom receipt page check the box next to Use Custom Receipt Page. The custom receipt page allows you to override the default receipt page with your own html markup. You can embed your webform components to be used in the receipt page by selecting the field from the Smart Tag dropdown menu and then clicking the Add button.

For example, the following template will create a table including the first and last name, request ID, and amount:
<table>
<tr><th>Name</th><td>##first_name## ##last_name##</td></tr>
<tr><th>Request ID</th><td>##requestID##</td></tr>
<tr><th>Amount</th><td>##price##</td></tr>
</table>

Test your Cybersource Webform

For the receipt page to work properly, you must first configure the Secure Acceptance settings in the Cybersource Business Center system to send data to your Drupal site.

Once you have verified that, return to your Drupal Cloud site and test your form.

1. Click the View tab at the top right to switch to the webform entry screen.
   
   
   
2. Enter the billing information on the form and click the Submit button.
3. Enter the Captcha words you see on your screen and click the Submit button. This option may be disabled for some merchants.
   
   
   
4. You will be redirected to the Cybersource order page.
   
   
   
5. Your billing information should already be populated from your webform.
6. Enter your test credit card information.
   1. Credit Card Type: Visa
   2. Credit Card Number: 4111111111111111
   3. Card Verification Number: any 3 digits
   4. Card Expiration Date: any non-expired date
7. Click the Submit button.
   You are returned to your Drupal receipt page. If you used the custom receipt page in the example above, your receipt page will look something like this:
   
   
   

To View Your Transactions

1. From the administrator toolbar click Content, then click edit to the right of your Cybersource webform.
2. Click the Results tab to view a list of your transactions.
3. Click the View link to see the details for a transaction.
   

See Also

• Return to Drupal Cloud Landing Page