Collect Payment Information

Before Spreedly can transact against your gateway you need to store your users’ credit card information (more generally called a payment method). Because this is sensitive cardholder data it should be added without ever touching your servers, to minimize your PCI scope.

PCI Compliance

One of the main benefits of Spreedly is that we handle the details of securely storing and handling sensitive credit card 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’ card data to Spreedly. We will use the simplest and most secure method, Spreedly Express, here, but whatever method you choose should be a deliberate decision based on the requirements and tradeoffs you’re willing to make.

Payment form

The quickest way to accept credit cards on your site is to use Spreedly Express. Spreedly Express is a modal view that provides a secure way to send card data to Spreedly:

The rest of this guide will show you how to get Express integrated into your page. You can see a live demo of Spreedly Express as well as review the source code.

Add Express

To add Express to your checkout page, first include the Express javascript:

<script src="https://core.spreedly.com/iframe/express-2.min.js"></script>

Then, using Javascript, initialize Express with the Spreedly environment where you want payment methods to be tokenized along with some basic details about the user’s order.

SpreedlyExpress.init("C7cRfNJGODKh4Iu5Ox3PToKjniY", {
  "amount": "$9.83",
  "company_name": "Acme Widgets"
});

Once initialized, the only thing left to do is to tell Express to open when you’re ready to collect payment information. This can be as simple as attaching it to a payment button on your checkout page, or even programmatically opening Express when the page loads.

<form id="payment-form" action="https://yoursite.com/checkout">
  <input type="hidden" name="payment_method_token" id="payment_method_token">
  <input type="button" value="Enter Payment Info" onclick="SpreedlyExpress.openView();">
</form>

This will create a button that, when pressed, will open the Express window pre-configured with the options set in init.

After Spreedly Express tokenizes your customer’s payment method, the onPaymentMethod callback is triggered. Register a callback which takes the resulting payment method token and sends it to your servers for processing.

SpreedlyExpress.onPaymentMethod(function(token, paymentMethod) {

  // Send requisite payment method info to backend
  var tokenField = document.getElementById("payment_method_token");

  tokenField.setAttribute("value", token);

  var masterForm = document.getElementById('payment-form');
  masterForm.submit();
});

If you reload your checkout page, you should be able to open Spreedly Express. You can test the built-in validation behavior using our test cards. Submitting payment information from Express will tokenize the card at Spreedly, then submit the token to your endpoint for actual transacting.

Next

When a user submits their payment information via Express no transaction is executed. Even though Express displays purchase amounts and other transactional information, it is up to you to invoke a purchase or authorization from your secure, server-side, environment. You can do so easily, making a purchase using the tokenized payment method created by Express.