Developing on Invoiced
Payment Information

10min
In this document we are going to show you how to collect, store, and use payment information on Invoiced through your own website or application.
Introduction
When implementing Invoiced into your app or website you often want control over the billing and payment UIs in order to provide customers with a seamless experience. Invoiced allows you to collect and vault payment information using your own forms while still relying on Invoiced to manage payments. As a result of letting Invoiced handle payment information you can also enjoy simplified PCI compliance.
The way that it works is that within your customer's web browser you can tokenize your customer's payment information that can later be passed to our API in order to save the payment information for future billing or payments.
The key to a secure implementation is to use either the Invoiced tokenization scheme or your payment gateway's tokenization scheme (if there is one). Tokenization gives you a randomly generated token ID that you can pass to your servers that references the payment information collected. The benefit of this approach is to prevent you from directly handling sensitive payment information.
With tokenization the payment information is sent to Invoiced on the client-side using our Javascript library. When the payment information is sent in you receive a short-lived, single-use token that references the captured payment information, which can be a card or bank account. You can then use that payment info token in our API to vault it on a customer's account or use it to process a payment.
It's important to consider that payment info tokens will only work with your Invoiced account and last for a maximum of 2 hours. Once a token is used it cannot be re-used. As such you should not be storing tokens on your end.
Prerequisites
You have built your own form to capture payment information.
Include the invoiced.js library on your payment page
Obtain your publishable key from Settings → Developers.
HTML
<script src="https://js.invoiced.com/v1/"></script>
<script src="https://js.invoiced.com/v1/"></script>
﻿
Storing credit card information
1. Tokenize credit card
HTML
<script type="text/javascript">
    Invoiced.setPublishableKey("{YOUR_PUBLISHABLE_KEY}");

    // This information should be collected by your form...
    var number = '4242424242424242';
    var cvc = '123';
    var expMonth = '12';
    var expYear = '2021';
    var name = 'Jim Halpert';
    var address = {
        address1: '1234 Main St',
        address2: null,
        city: 'Scranton',
        state: 'PA',
        postal_code: '12345',
        country: 'US'
    };
    Invoiced.card.tokenize(number, cvc, expMonth, expYear, name, address, handleInvoicedToken);

    function handleInvoicedToken(statusCode, response) {
        if (statusCode >= 400) {
            console.error(response.message);
            return;
        }

        console.log('Success! Send this token to the backend for the next step: ', response.id);
    }
</script>
<script type="text/javascript">
    Invoiced.setPublishableKey("{YOUR_PUBLISHABLE_KEY}");

    // This information should be collected by your form...
    var number = '4242424242424242';
    var cvc = '123';
    var expMonth = '12';
    var expYear = '2021';
    var name = 'Jim Halpert';
    var address = {
        address1: '1234 Main St',
        address2: null,
        city: 'Scranton',
        state: 'PA',
        postal_code: '12345',
        country: 'US'
    };
    Invoiced.card.tokenize(number, cvc, expMonth, expYear, name, address, handleInvoicedToken);

    function handleInvoicedToken(statusCode, response) {
        if (statusCode >= 400) {
            console.error(response.message);
            return;
        }

        console.log('Success! Send this token to the backend for the next step: ', response.id);
    }
</script>
﻿
2. Add card to the customer
If this is a new customer then you can pass in the Invoiced token like below:
Curl
Java
PHP
Python
Ruby
curl "https://api.invoiced.com/customers" \
  -u {API_KEY}: \
  -d name="Acme" \
  -d payment_source[method]=credit_card \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
curl "https://api.invoiced.com/customers" \
  -u {API_KEY}: \
  -d name="Acme" \
  -d payment_source[method]=credit_card \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
﻿
Or if this is an existing customer then you can make a similar call to update the customer (assuming you have already retrieved the customer):
Curl
Java
PHP
Python
Ruby
curl "https://api.invoiced.com/customers/CUSTOMER_ID" \
  -u {API_KEY}: \
  -d payment_source[method]=credit_card \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
curl "https://api.invoiced.com/customers/CUSTOMER_ID" \
  -u {API_KEY}: \
  -d payment_source[method]=credit_card \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
﻿
Storing bank account information
You can also capture bank account information for ACH debits.
1. Tokenize bank account
HTML
<script type="text/javascript">
    Invoiced.setPublishableKey("{YOUR_PUBLISHABLE_KEY}");

    // This information should be collected by your form...
    var name = 'Jim Halpert';
    var accountType = 'individual'; // `individual` or `company`
    var accountNumber = '123456789';
    var routingNumber = '110000000';

    Invoiced.bankAccount.tokenize(name, accountType, accountNumber, routingNumber, handleInvoicedToken);

    function handleInvoicedToken(statusCode, response) {
        if (statusCode >= 400) {
            console.error(response.message);
            return;
        }

        console.log('Success! Send this token to the backend for the next step: ', response.id);
    }
</script>
<script type="text/javascript">
    Invoiced.setPublishableKey("{YOUR_PUBLISHABLE_KEY}");

    // This information should be collected by your form...
    var name = 'Jim Halpert';
    var accountType = 'individual'; // `individual` or `company`
    var accountNumber = '123456789';
    var routingNumber = '110000000';

    Invoiced.bankAccount.tokenize(name, accountType, accountNumber, routingNumber, handleInvoicedToken);

    function handleInvoicedToken(statusCode, response) {
        if (statusCode >= 400) {
            console.error(response.message);
            return;
        }

        console.log('Success! Send this token to the backend for the next step: ', response.id);
    }
</script>
﻿
2. Add bank account to the customer
If this is a new customer then you can pass in the Invoiced token like below:
Curl
Java
PHP
Python
Ruby
curl "https://api.invoiced.com/customers" \
  -u {API_KEY}: \
  -d name="Acme" \
  -d payment_source[method]=ach \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
curl "https://api.invoiced.com/customers" \
  -u {API_KEY}: \
  -d name="Acme" \
  -d payment_source[method]=ach \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
﻿
Or if this is an existing customer then you can make a similar call to update the customer (assuming you have already retrieved the customer):
Curl
Java
PHP
Python
Ruby
curl "https://api.invoiced.com/customers/CUSTOMER_ID" \
  -u {API_KEY}: \
  -d payment_source[method]=ach \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
curl "https://api.invoiced.com/customers/CUSTOMER_ID" \
  -u {API_KEY}: \
  -d payment_source[method]=ach \
  -d payment_source[invoiced_token]={CAPTURED_TOKEN}
﻿
﻿
Did this page help you?
OAuth
Subscription Billing