> ## Documentation Index
> Fetch the complete documentation index at: https://wpay-feat-edp-guide.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Secure Fields with stored cards

> Use Secure Fields to collect the CVV for cards previously stored.

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](./quick-start) to store the card
details as a new payment method in our vault.

<CodeGroup>
  ```js cURL
  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"
          }`
  ```

  ```js Node
  request.paymentMethod = new PaymentMethodRequest();
  request.paymentMethod.method = "checkout-session";
  request.paymentMethod.id = "a554a812-50dc-419c-aa7d-801c359b8181";

  const paymentMethod = await client.storePaymentMethod(request);
  ```
</CodeGroup>

<br />

<Warning>
  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.
</Warning>

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.

```json
{
    "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.

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

  ```js Node / CDN
  const secureFields = new SecureFields({
    gr4vyId: "example",
    environment: "sandbox",
    sessionId: "332a6c3a-c4eb-45f6-9a4e-72af459535e2",
    paymentMethodId: "77a76f7e-d2de-4bbc-ada9-d6a0015e6bd5"
  });
  ```
</CodeGroup>

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

<CodeGroup>
  ```jsx React
  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> 
      </>
    )
  }
  ```

  ```html Node / CDN
  <label for="cc-security-code">Security Code</label>
  <input id="cc-security-code" />

  <button id="cc-button">Store</button>

  <script>
    const securityCodeField = secureFields.addSecurityCodeField(
      "#cc-security-code",
      {
        placeholder: "Enter security code",
      }
    );
  </script>
  ```
</CodeGroup>

<br />

<Warning>
  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.
</Warning>

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

<CodeGroup>
  ```js cURL
  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"
            }
          }'
  ```

  ```js Node
  const request = new TransactionRequest();
  request.amount = 1299;
  request.currency = "AUD";

  request.paymentMethod = new TransactionPaymentMethodRequest();
  request.paymentMethod.method = "checkout-session";
  request.paymentMethod.id = "332a6c3a-c4eb-45f6-9a4e-72af459535e2";

  const transaction = await client.authorizeNewTransaction(request);
  ```
</CodeGroup>

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

```json
{
  "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",
    ...
  },
  ...
}
```