Collect Payment Information

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

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. In the example on this page, we will use the simplest and most secure method, Spreedly Express. Whichever method you choose for collecting payment information should be a deliberate decision based on your requirements.

Payment form

The quickest way to accept credit cards on your site is to use Spreedly Express, which 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 integrate Express into your page. You can watch a live demo of Spreedly Express and 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.

The code below will add a button to your page that will open the Express window pre-configured with the options set in init:

<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>

After Spreedly Express tokenizes your customer’s payment method, the onPaymentMethod callback is triggered. Register a callback that 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 and 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 by making a purchase using the tokenized payment method created by Express.