Charging with saved payment details

You can store customer credit card and bank account details for future use, such as scheduled billing or re-populating form fields following a rejected transaction due to validation errors. After you create a saved card or bank, you can create a charge with a saved card.

Creating a saved card or bank

You’ll create a one-time payment token using credit card or bank account details and then save that one-time token as a saved payment token.

To create a saved credit card from a one-time token:

  1. Using a payment form, create a one-time token from card details.
  2. Create a saved credit card using a one-time token ID:
    curl -X POST -H "Content-Type:application/json" --user <secret_key>: https://api.chargeio.com/v1/cards  -d '
     {
       "token_id": "olxSbEDSRN6RxIURjOxKTw"
     }'

    Example response
    {
       "id": "RhX6GEGcS8SogoXMPD85xA",
       "created": "2017-02-28T17:46:31.267Z",
       "modified": "2017-02-28T17:46:31.267Z",
       "name": "Dave Bowman",
       "address1": "2001 Odyssey Ln",
       "address2": "Suite 100",
       "city": "Austin",
       "state": "TX",
       "postal_code": "78750",
       "type": "card",
       "number": "************4242",
       "fingerprint": "GunPelYVthifNV63LEw1",
       "card_type": "VISA",
       "exp_month": 10,
       "exp_year": 2022
     }

Tip: Create a saved bank account the same way by tokenizing the bank account details and sending the POST request to the banks endpoint instead.

Creating a charge with a saved card

Using saved payment details to create a charge is as simple as sending a POST request to the charges endpoint. The charge object should include the following properties:

curl -X POST -H "Content-Type:application/json" --user <secret_key>: https://api.chargeio.com/v1/charges -d '
{
  "amount": "50000",
  "method": "RhX6GEGcS8SogoXMPD85xA",
  "account_id": "diON4KOPnesamprmrxA8Iuo"
}'

Updating a saved card or bank

You can update a saved card or bank, such as when a card has been renewed and the expiration date has changed or a bank account holder’s name has a typo. You can do so with or without calling setSavedPaymentMethod.

Updating a saved payment method without calling setSavedPaymentMethod

The merchant’s saved payment method is now updated.

// This saved payment method will come from your backend service
  const savedPaymentMethod = {
    "id": "QMC1gjkWQUu_qYKRyMSnRQ",
    "created": "2019-04-15T15:35:57.437Z",
    "modified": "2019-04-15T15:35:57.437Z",
    "address1": "123 memory lane",
    "city": "Austin",
    "state": "Texas",
    "postal_code": "78717",
    "type": "card",
    "number": "************4242",
    "fingerprint": "GunPelYVthifNV63LEw1",
    "card_type": "VISA",
    "exp_month": 10,
    "exp_year": 2030
  }

  // The hostedFields object is the return object from window.AffiniPay.HostedFields.initializeFields
  // Be sure to add a 'type' key that is card for updating saved cards, or 'bank' for updating saved banks
  hostedFields.updateSavedPaymentMethod({ exp_year: 2025, exp_month: 3, type: 'card' }, 'QMC1gjkWQUu_qYKRyMSnRQ')
  .then(function(updateToken){
    // Pass this token to your backend service, your backend service will be responsible for saving the charge
    console.log(updateToken)
  })

See Basic Example for an update saved payment method implementation.

Updating a saved payment method by calling setSavedPaymentMethod

The merchant’s saved payment method is now updated.

// This saved payment method will come from your backend service
  const savedPaymentMethod = {
    "id": "QMC1gjkWQUu_qYKRyMSnRQ",
    "created": "2019-04-15T15:35:57.437Z",
    "modified": "2019-04-15T15:35:57.437Z",
    "address1": "123 memory lane",
    "city": "Austin",
    "state": "Texas",
    "postal_code": "78717",
    "type": "card",
    "number": "************4242",
    "fingerprint": "GunPelYVthifNV63LEw1",
    "card_type": "VISA",
    "exp_month": 10,
    "exp_year": 2030
  }

  // The hostedFields object is the return object from window.AffiniPay.HostedFields.initializeFields
  hostedFields.setSavedPaymentMethod(savedPaymentMethod)

  // The hostedFields object is the return object from window.AffiniPay.HostedFields.initializeFields
  // Be sure to add a 'type' key that is card for updating saved cards, or 'bank' for updating saved banks
  hostedFields.updateSavedPaymentMethod({ exp_year: 2021, exp_month: 5, 'type': card })
  .then(function(updateToken){
    // Pass this token to your backend service, your backend service will be responsible for saving the charge
    console.log(updateToken)
  })

See Basic Example for an update saved payment method implementation