Secure Fields with stored cards

It is possible to use Secure Fields to collect card details on a profile page to store the card on a buyer’s account.

Secure Fields can then be used to collect the security code at checkout, allowing a buyer to use a stored card together with a securely collected security code.

​

1. Store card for future use

The first step is to store the card data for future use. Use the checkout session as described in our quick-start to store the card details as a new payment method in our vault.

curl -i -X POST "https://api.example.gr4vy.app/payment-methods" \
    -H "Authorization: Bearer [JWT_TOKEN]" \
    -H "Content-Type: application/json" \
    -d `{
            "method": "checkout-session",
            "id": "a554a812-50dc-419c-aa7d-801c359b8181"
        }`

The returned payment method includes details about the card that was used, as well as the id of the payment method that we can use in the next step.

{
    "type": "payment-method",
    "id": "77a76f7e-d2de-4bbc-ada9-d6a0015e6bd5",
    "method": "card",
    "scheme": "visa",
    "expiration_date": "07/24",
    ...
}

​

2. Collect the CVV

At checkout, Secure Fields can be used to collect the CVV for a previously stored card.

When initializing Secure Fields, make sure to pass the id of the previously stored card.

<SecureFields
    gr4vyId="example"
    environment="sandbox"
    sessionId="332a6c3a-c4eb-45f6-9a4e-72af459535e2"
    paymentMethodId="77a76f7e-d2de-4bbc-ada9-d6a0015e6bd5"
>
    <Form />
</SecureFields>
};

With this ID in place, you capture the security code securely.

import {
  CardNumber,
  ExpiryDate,
  SecurityCode,
} from '@gr4vy/secure-fields-react'

const Form = () => {
  return (
    <> 
        <label htmlFor="cc-security-code">Security Code</label>
        <SecurityCode placeholder="Enter security code" />
        <button id='cc-button'>Store card data</button> 
    </>
  )
}

​

3. Create a transaction

When Secure Fields is submitted, it will collect the security code for the stored payment method. You can then create a transaction with the checkout session much like a regular Secure Fields transaction.

curl -i -X POST "https://api.example.gr4vy.app/transactions" \
    -H "Authorization: Bearer [JWT_TOKEN]" \
    -H "Content-Type: application/json" \
    -d '{
          "amount": 1299,
          "currency": "AUD",
          "payment_method": {
            "method": "checkout-session",
            "id": "332a6c3a-c4eb-45f6-9a4e-72af459535e2"
          }
        }'

The returned transaction includes details about the payment method used, and the status of the transaction.

{
  "type": "transaction",
  "id": "fe26475d-ec3e-4884-9553-f7356683f7f9",
  "status": "authentication_succeeded",
  "amount": 1299,
  "currency": "AUD",
  "payment_method": {
    "type": "payment-method",
    "id": "77a76f7e-d2de-4bbc-ada9-d6a0015e6bd5",
    "method": "card",
    "scheme": "visa",
    "expiration_date": "07/24",
    ...
  },
  ...
}