Access Keys:
Skip to content (Access Key - 0)

MIT Sites (CampusPress) - E-Commerce Options

On this page:

E-Commerce with CampusPress – Where do I Start?

If you are new to e-commerce, you will need to apply for an MIT Merchant ID before setting up an e-commerce enabled website. To request an MIT Merchant ID, send a request to or visit the Merchant Services page at VPF.

Instructions in this KB article are targeted at users who have already been approved and set up for using e-commerce at MIT through Merchant Services and those who are somewhat familiar already with e-commerce and/or building out a website with forms and interactive pages.

Please note: Employing any MIT-hosted website for collection of credit card or other payments except where explicit approval from VPF has been granted is strictly against MIT’s website usage policies.

CampusPress E-commerce Integration Options at MIT – CyberSource and Stripe

For DLCs at MIT wishing to migrate to or start using CampusPress for an e-commerce enabled website, MIT now has two e-commerce service options: CyberSource and Stripe.

Both CyberSource and Stripe are simple, and provide single payment and purchasing options. While they are useful for simple credit card purchases, they do not offer the complexity or robustness of more comprehensive ecommerce applications, such as a shopping cart.

The instructions in this KB article are meant to serve as a quick start for e-commerce integration in the CampusPress/ MIT environment. This article assumes that you have created custom HTML forms before and that you are familiar with the e-commerce concepts and terms as well as web design and coding basics.
Using CyberSource forms in CampusPress.

Using the instructions and bare bones sample forms here, you will have the basics of what you need to create a simple CyberSource form enabled for credit card transactions.

Using CyberSource in Campus Press requires manually coded HTML forms. It is up to the developer to build out a form in HTML employing the specific customizations detailed below. You would then paste the html code into a CampusPress page or post using a custom html block, or using the code editor option.

Please note: The Formidable Forms plug-in cannot be used to design CyberSource enabled web forms. CyberSource requires manual coding of forms.

Creating Cybersource-enabled Web Forms in HTML

Form Fields and Mapping Attribute Names

When adding field inputs for the data you wish to collect through your web form, the ‘name’ attribute(s) must have values which map verbatim to the MIT CyberSource API.


A complete input including the field label for a first name field would look like this:

Field Attribute Names

The following is a list of optional as well as required fields with corresponding ‘name’ attribute values. You may edit the field labels as you wish, but the ‘name’ attributes must be entered exactly as shown in the right-hand column here.

Label Attribute Name
Hidden Data  
*MIT Merchant ID merchant_id
Billing Information:  
Customer Id billTo_customerID
First Name billTo_firstName
Last Name billTo_lastName
Company billTo_company
Billing Address 1 billTo_street1
Billing Address 2 billTo_street2
City billTo_city
State: billTo_state
Country: billTo_country
Zip billTo_postalCode
Phone billTo_phoneNumber
Email billTo_email
Shipping Information: (Optional)  
First Name shipTo_firstName
Last Name shipTo_lastName
Company shipTo_company
Shipping Address 1 shipTo_street1
Shipping Address 2 shipTo_street2
City shipTo_city
State: shipTo_state
Country: shipTo_country
Zip shipTo_postalCode
Additional Information: (Optional)  
Merchant Field 1 merchantDefinedData1
Merchant Field 2 merchantDefinedData2
Merchant Field 3 merchantDefinedData3
Merchant Field 4 merchantDefinedData4
Comments comments
Pricing Information:  
*Total Amount amount

*While you will likely want to require that users provide more than just the Amount field, only the Amount and the hidden Merchant ID fields are required by CyberSource.

Form Action and Method Attributes in Test vs. Production Mode

For testing: Set the action attribute of the form to the Test Server URL.
For production: When the form is ready to go live, set the action attribute to the Production Server URL.
The form method should be set to ‘post’.

Some additional user tips for creating Cybersource webforms:

While only one payment amount is allowed per form, it is possible, using javascript, to subtotal charges prior to submitting the total amount.

CyberSource Form Examples – Sample and Live

Sample form – all fields:

Example of Live CyberSource Form on MIT’s CampusPress site:

Using Stripe with Campus Press

Stripe is an additional ecommerce option available to MIT. Once you have your Stripe account issued by MIT Merchant Services, you will want to add the “products” that you offer on your website into the Stripe product interface. Instructions for working with the product listings are included here.

Adding a Product and a Payment Link with Stripe

  1. Log Into Stripe
  2. Under the Products, click Add Product
  3. Add a product name, price, and relevant details (description, etc.)
  4. Save your product.
  5. Click Create a Payment Link
  6. Click to add any options you want for this purchase item.
  7. Click Create Link button in upper right corner.
  8. Once back at the product page, you will now have three options for adding a buy link to paste in your own website page: a URL payment link, a QR code, and a Buy button. Instructions for using the three options are given below.

Using a URL payment link

In your CampusPress site

  1. Create a new page, or use existing page.
  2. In your CampusPress page, determine where you wish to place the URL and use the + sign to add either a Custom HTML block or a Button from the drop-down options provided.
  3. If using custom HTML block, paste the Stripe URL into your own custom code block. If you added a Button instead, simply paste the Stripe URL as link associated with the Button and provide a label of your choice.
  4. Save your page.
  5. Test the URL link or button.
  6. Still in the Stripe Product page, select the Copy button at the top of the page next to the payment URL.

Using a QR code

  1. Click the QR Code button at the top of the page
  2. Click to either download the image or copy it.
  3. In Campus Press
    1. Create a new page, or use existing page.
    2. In the page, using the block editor, select Image block type
    3. Upload the QR image or paste it into the image block.
    4. As the initial image is quite large, you can change the size of the image using the Image resizing tools in the Image block settings, the media tab settings, or a CSS stylesheet (refer to using Adding Custom CSS in Campus Press).
      Check to see if the image is still scannable at the new size.
    5. Save your page.

Using a Buy button.

  • Click the Buy button at the top of the page.
  • In Campus Press
    1. Create a new page, or use existing page.
    2. In the page, using the block editor, select Custom HTML block type.
    3. Paste the button HTML code into the HTML block.
    4. Save your page.

Stripe Payment Examples

Here are some live examples of Stripe Payment Pages:

See Also

IS&T Contributions

Documentation and information provided by IS&T staff members

Last Modified:

April 11, 2024

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
This product/service is:
Easy to use
Difficult to use

This article is:
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki