How To Collect Payment Information

Before Spreedly can run a transaction against the gateway you set up, you need to store your users’ payment method information. To minimize PCI scope, this sensitive cardholder data should be added without ever touching your servers.

PCI compliance

Spreedly manages the details of securely storing and handles sensitive payment method data, which can drastically reduce your PCI compliance burden. However, it is ultimately up to you to evaluate what level of PCI compliance is required for your business.

Spreedly provides a variety of methods to send your customers’ data to Spreedly. In the example on this page, we will show two of the most PCI compliant and secure methods: Spreedly’s iFrame and Spreedly Express. There are additional methods for collecting payment information which may be considered, based on your specific checkout requirements.

When a user submits their payment information via either of the methods below, no purchase transaction is executed. Both iFrame and Express will return a tokenized payment method (and PCI compliant card data) for you to share with your server-side environment. It is up to you to invoke a purchase or authorization from your secure, server-side environment. You can do so by making a purchase call using the tokenized payment method created by iFrame or Express.

iFrame

The most flexible way to send payment data to Spreedly is to use iFrame. If you wish to implement a custom checkout experience while still limiting your PCI compliance, the recommended approach is to integrate iFrame into your payment form. iFrame enables the PCI critical fields to match your checkout experience while still storing card data in the Spreedly vault without the card data ever touching your environment.

If you are looking for specific commands or options, please see the iFrame API reference.

Before you begin

You will need your environment key and access secret from app.spreedly.com, as well as your gateway token. It may be helpful to have valid test card numbers at hand for easy reference and testing. A demo payment page that uses iFrame is live at the Sample Payment Frame, or review the source code.

Adding iFrame to your checkout page

Spreedly’s iFrame payment form is a Javascript library that provides two Spreedly-managed fields for collecting the credit card number and CVV (the two PCI-sensitive fields of a payment method). Your checkout page places and styles these two fields within your checkout form, and the iFrame returns a tokenized payment method to the host page when the payment method has been successfully submitted.

To add iFrame to your checkout page, please follow this guide.

Express

Another way to accept credit cards on your site is to use Spreedly Express, which uses a premade modal view to provide a secure way to send card data to Spreedly. This method reduces the amount of development time needed to add collecting payment information to your checkout experience, at the tradeoff of reduced form customization and flexibility. You can interact with a live demo of Spreedly Express, or review the source code.

Adding Express

To add Express to your checkout page, please follow this guide.

Collecting payment information

There are situations requiring users' payment method submission using a more direct method or from a non-web source. These methods accept greater PCI scope than Spreedly's iFrame or Express, but may be necessary in some cases.

The following describes various methods of collecting and submitting payment method information to Spreedly:

if you want to...	you can use...	which...	while incurring...
Have customers enter payment information into an HTML web form	iFrame payment form	allows fully custom UI	minimal PCI scope
	Spreedly Express	is a simple reference implementation with minimal customization/configuration	minimal PCI scope
	the direct post/transparent redirect form	is simple to implement and customize	an increased amount of PCI scope
Submit the customer's payment information from the browser using Javascript	the Javascript API to collect and submit requests to Spreedly	allows asynchronous submission of payment info directly to Spreedly	an increased amount of PCI scope
Submit payment information from a non-browser environment	the direct API	allows custom programming languages, and the submission of cards already on file	the greatest amount of PCI scope
Submit the customers payment information within a mobile application	iFrame or Express via mobile webview, or alternatively, Android / Apple SDKs	is the recommended path for collecting payments in a mobile app (iFrame webview)	a minimal amount of PCI scope

When a payment method is added, there is no transaction or validation executed. A payment method token is returned for any method besides Express— if using Express, purchase amounts and other transactions information will display. However, a purchase or authorization must still be invoked from a secure, server-side environment.

CVV Number

The Card Verification Value (CVV) is a 3 or 4 digit number located on a card, depending on card type or brand. It is a security code used for card-not-present transactions.

The Payment Card Industry Data Security Standard (PCI DSS) prohibits the storage of the CVV. We at Spreedly pass along the CVV for the first authorize, purchase, or verify event on a given card. Future transactions using that vaulted card do not include the CVV.

Note: CVV is not verified when a new payment method is added, as a transaction is not executed. Although a token is returned, a purchase or authorization must be invoked from a secure, server-side environment to verify CVV for that payment method.