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 chargemit-help@mit.edu 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.

Example:

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.

*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

Action:
For testing: Set the action attribute of the form to the Test Server URL.
Test: https://shopmittst.mit.edu/controller/index.php
For production: When the form is ready to go live, set the action attribute to the Production Server URL.
Production: https://shopmitprd.mit.edu/controller/index.php
Method:
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: http://vpf.mit.edu/sites/default/files/static/sample_payment_page.html

Example of Live CyberSource Form on MIT’s CampusPress site: https://sites.mit.edu/campuspress-demo/cybersource-demo/

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:

• Payment URL: https://sites.mit.edu/campuspress-demo/stripe-payment-url-example/
• QR Code: https://sites.mit.edu/campuspress-demo/stripe-qr-code-example/
• Payment Button: https://sites.mit.edu/campuspress-demo/stripe-button-payment/

See Also

• Sites (CampusPress) Landing Page