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"
        }`

This will delete the security code from our system. We recommend not collecting the security code with Secure Fields in this use case. Instead, the security code will be collected in the next step.

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> 
    </>
  )
}

When using the paymentMethodId with Secure Fields, only the security code can be captured. Attempting to add any of the other fields (number, expiration date) will result in an error.

​
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",
    ...
  },
  ...
}