# Collect Card Details in Documents & Contracts > Learn how to add Card Details to Documents & Contracts so signers can securely save a card on file for future invoices and payment workflows. - Source: https://docs.ghlcustomercare.com/docs/documents-and-contracts/documents-and-contracts-2/collect-card-details-in-documents-contracts - Section: Documents & Contracts / Documents and Contracts - Reading time: 6 min - Images: 6, each explained below --- Collecting card details inside **Documents & Contracts** helps you save a signer’s payment method during the document completion process. With the **Card Details** field, businesses can reduce payment follow-ups, support future invoices or subscriptions, and keep the signing-to-payment workflow smoother. This is useful when you want to collect authorization and payment details upfront without requiring an immediate payment at the time of signing. --- **TABLE OF CONTENTS** - [What is Card Details in Documents & Contracts?](#what-is-card-details-in-documents-and-contracts)[](#key-benefits-of-card-details-in-documents-and-contracts) - [Key Benefits of Card Details in Documents & Contracts](#key-benefits-of-card-details-in-documents-and-contracts)[](#card-details-field-requirements) - [Card Details Field Requirements](#card-details-field-requirements)[](#card-details-field-settings) - [Card Details Field Settings](#card-details-field-settings)[](#signer-experience) - [Signer Experience](#signer-experience)[](#card-details-vs-direct-payments) - [Card Details vs. Direct Payments](#card-details-vs-direct-payments)[](#how-to-setup-card-details-in-documents-and-contracts) - [How To Setup Card Details in Documents & Contracts](#how-to-setup-card-details-in-documents-and-contracts)[](#frequently-asked-questions) - [Frequently Asked Questions](#frequently-asked-questions)[](#related-articles) - [Related Articles](#related-articles) --- # **What is Card Details in Documents & Contracts?** Card Details is a fillable field that can be added to GHL Customer Care documents and templates so signers can securely enter their card information while completing a document. Once the signer adds their card, the card is saved on file and can be used for future payment workflows supported by your connected payment provider. The Card Details field is available from the **Add Element** panel inside the Document Builder. It works alongside other fillable fields such as Signature, Text Field, Date, Initials, and Checkbox. ![What is Card Details in Documents & Contracts? (image 1 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155071216175/original/KlkE7qmJviftLoZSnlQGKYj4qxsZcAosTQ.jpeg) **What is Card Details in Documents & Contracts? (image 1 of 6)** This screenshot appears in the "What is Card Details in Documents & Contracts?" section of "Collect Card Details in Documents & Contracts". The text alongside this image reads: The Card Details field is available from the Add Element panel inside the Document Builder. It works alongside other fillable fields such as Signature, Text Field, Date, Initials, and Checkbox. Immediately after, the guide continues: Saving card details during document completion helps teams collect payment information earlier in the customer journey. This reduces delays after a contract, proposal, or agreement is signed and makes it easier to support future billing…. - What this covers: The Card Details field is available from the Add Element panel inside the Document Builder. It works alongside other fillable fields such as Signature, Text Field, Date, Initials, and Checkbox. - Controls: Add Element - Next: Saving card details during document completion helps teams collect payment information earlier in the customer journey. This reduces delays after a contract, proposal, or agreement is signed and makes it easier to support future billing workflows. --- ## **Key Benefits of Card Details in Documents & Contracts** Saving card details during document completion helps teams collect payment information earlier in the customer journey. This reduces delays after a contract, proposal, or agreement is signed and makes it easier to support future billing workflows. - **Collect Card Details During Signing:** Capture the signer’s card information while they are already completing the document. - **Reduce Manual Follow-Ups:** Avoid sending separate messages asking customers to provide payment details after signing. - **Support Future Payment Workflows:** Use saved cards for future invoices, orders, subscriptions, or auto-pay workflows where supported. - **Improve Document-to-Payment Flow:** Keep signing and payment authorization in one streamlined experience. - **Make Card Collection Required When Needed:** Mark the Card Details field as required so the signer must provide card details before finishing the document. - **Use in Documents or Templates:** Add the Card Details field to a one-time document or a reusable document template. --- ## **Card Details Field Requirements** The Card Details field depends on your payment setup because the signer’s card must be securely saved through a connected payment provider. Confirming your payment provider before sending the document helps prevent setup errors and ensures the signer can complete the card entry step successfully. Before using the Card Details field, make sure: - A supported payment provider is connected to the location. - The payment provider is active and available for the document workflow. - The Card Details field is assigned to the correct signer. - The field is marked as required if the signer must add a card before completing the document. If no payment provider is connected, the Properties panel may display a **Payment Provider Required** warning. Use the **Connect** option to connect a provider or **Sync Changes** after updating your payment provider settings. ![Card Details Field Requirements (image 2 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155071216222/original/lxuPM3tlNRFLdMByTK-n22uiZuiYWFuMXw.jpeg) **Card Details Field Requirements (image 2 of 6)** This screenshot appears in the "Card Details Field Requirements" section of "Collect Card Details in Documents & Contracts". The text alongside this image reads: If no payment provider is connected, the Properties panel may display a Payment Provider Required warning. Use the Connect option to connect a provider or Sync Changes after updating your payment provider settings. Immediately after, the guide continues: The Card Details field can be customized from the Properties panel after it is added to the document. These settings help control who fills out the field, whether it is required, and what text the signer sees on the field. - What this covers: If no payment provider is connected, the Properties panel may display a Payment Provider Required warning. Use the Connect option to connect a provider or Sync Changes after updating your payment provider settings. - Controls: Payment Provider Required, Connect, Sync Changes - Next: The Card Details field can be customized from the Properties panel after it is added to the document. These settings help control who fills out the field, whether it is required, and what text the signer sees on the field. Full procedure: 1. A supported payment provider is connected to the location. 2. The payment provider is active and available for the document workflow. 3. The Card Details field is assigned to the correct signer. 4. The field is marked as required if the signer must add a card before completing the document. --- ## **Card Details Field Settings** The Card Details field can be customized from the Properties panel after it is added to the document. These settings help control who fills out the field, whether it is required, and what text the signer sees on the field. Available settings include: - **To be filled by:** Assigns the Card Details field to a specific signer. - **Required:** Makes the card field mandatory before the signer can finish the document. - **Placeholder:** Controls the field label shown to the signer, such as “Provide Card Details.” ![Card Details Field Settings (image 3 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155071216255/original/DcMEsD8ttLBsRVBLgl606__Xc9vRSP9wLQ.jpeg) **Card Details Field Settings (image 3 of 6)** This screenshot appears in the "Card Details Field Settings" section of "Collect Card Details in Documents & Contracts". The text alongside this image reads: To be filled by: Assigns the Card Details field to a specific signer. Required: Makes the card field mandatory before the signer can finish the document. Placeholder: Controls the field label shown to the signer, such as “Provide Card Details.”. Immediately after, the guide continues: The signer completes the Card Details field as part of the document filling process. This allows the signer to provide payment details without leaving the document workflow. - What to fill in: To be filled by: Assigns the Card Details field to a specific signer. Required: Makes the card field mandatory before the signer can finish the document. Placeholder: Controls the field label shown to the signer, such as “Provide Card Details.” - Next: The signer completes the Card Details field as part of the document filling process. This allows the signer to provide payment details without leaving the document workflow. Full procedure: 1. To be filled by: Assigns the Card Details field to a specific signer. 2. Required: Makes the card field mandatory before the signer can finish the document. 3. Placeholder: Controls the field label shown to the signer, such as “Provide Card Details.” --- ## **Signer Experience** The signer completes the Card Details field as part of the document filling process. This allows the signer to provide payment details without leaving the document workflow. When the signer opens the document, they can click **Start filling out** and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer sees a confirmation that the card was securely saved on file. ![Signer Experience (image 4 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155071216267/original/AAfaz10MMxkJ3KZgvqWc8izZO3KiaMObGQ.png) **Signer Experience (image 4 of 6)** This screenshot appears in the "Signer Experience" section of "Collect Card Details in Documents & Contracts". The text alongside this image reads: When the signer opens the document, they can click Start filling out and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer…. Immediately after, the guide continues: Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. - What to fill in: When the signer opens the document, they can click Start filling out and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer sees a confirmation that the card was securely saved on file. - Controls: Start filling out - Next: Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. ![Signer Experience (image 5 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155071216289/original/BSL3692-KtwfjwauvhRXz3rzI4-kzK6gUQ.jpeg) **Signer Experience (image 5 of 6)** This screenshot appears in the "Signer Experience" section of "Collect Card Details in Documents & Contracts". The text alongside this image reads: When the signer opens the document, they can click Start filling out and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer…. Immediately after, the guide continues: Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. - What to fill in: When the signer opens the document, they can click Start filling out and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer sees a confirmation that the card was securely saved on file. - Controls: Start filling out - Next: Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. ![Signer Experience (image 6 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155071216306/original/aWeIs2xxjCMYMKiHz8R5OiBc5gN7cMcwyg.jpeg) **Signer Experience (image 6 of 6)** This screenshot appears in the "Signer Experience" section of "Collect Card Details in Documents & Contracts". The text alongside this image reads: When the signer opens the document, they can click Start filling out and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer…. Immediately after, the guide continues: Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. - What to fill in: When the signer opens the document, they can click Start filling out and complete the required fields. When they select the Card Details field, a secure card entry modal appears where they can enter their card number, expiration date, security code, and country. After the card is added, the signer sees a confirmation that the card was securely saved on file. - Controls: Start filling out - Next: Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. --- ## **Card Details vs. Direct Payments** Card Details and Direct Payments both support payment-related document workflows, but they serve different purposes. Choosing the right option helps prevent confusion for signers and ensures the document matches your billing process. Use **Card Details** when you want to securely save a signer’s card on file for future payment use. Adding this field does not automatically mean the signer is charged immediately. Use **Product List + Direct Payments** when the signer needs to pay immediately after signing. GHL Customer Care’s existing document payment workflow can generate an invoice and redirect the signer to payment after the document is signed. [Automatically Generate Invoices from Signed Documents & Contracts](https://docs.ghlcustomercare.com/docs/documents-and-contracts/documents-and-contracts-2/automatically-generate-invoices-from-signed-documents-contracts) --- ## **How To Setup Card Details in Documents & Contracts** Setting up the Card Details field correctly ensures the signer can provide card information during document completion and helps prevent payment provider errors before the document is sent. 1. Navigate to **Payments > Documents & Contracts**. 2. Open an existing document or template, or create a new document. 3. Click **\+ Add Element** in the Document Builder. 4. Under **Fillable Fields**, drag and drop **Card Details** into the document. 5. Click the Card Details field to open the Properties panel. 6. Under **To be filled by**, assign the field to the correct signer. 7. Enable **Required** if the signer must add card details before completing the document. 8. Update the **Placeholder** text if needed. 9. Confirm that a payment provider is connected. 10. If the Payment Provider Required warning appears, click **Connect** or update your provider settings and click **Sync Changes**. 11. Save the document or template. 12. Send the document to the signer. After the signer adds their card details, the card is securely saved on file and can be used for future payment workflows where supported. --- ## **Frequently Asked Questions** **Q: Does the Card Details field charge the signer immediately?** No. The Card Details field is used to securely save the signer’s card on file. Use a Product List with Direct Payments if you want to collect payment immediately after signing. **Q: Is a payment provider required to use the Card Details field?** Yes. A connected payment provider is required so the card can be securely saved and used for future payment workflows. **Q: Can I make the Card Details field required?** Yes. You can mark the field as required from the Properties panel so the signer must add card details before finishing the document. **Q: Can I use Card Details in templates?** Yes. The Card Details field can be added to documents and templates. **Q: What should I do if I see “Payment Provider Required”?** Connect a supported payment provider, confirm it is active, and use **Sync Changes** if the warning still appears after updating your provider settings. **Q: Can the saved card be used for subscriptions or auto-pay?** Yes, saved cards can support future payment workflows such as invoices, subscriptions, and auto-pay where supported by your payment setup. Auto Payments for recurring invoices rely on a customer card being available for future invoice charges. [Auto Payments for Recurring Invoices](https://docs.ghlcustomercare.com/docs/payments/invoices-and-estimates/auto-payments-in-recurring-templates) **Q: Can users see the full card number after it is saved?** No. Saved card workflows display limited card details, such as the card brand, last digits, and expiration information, instead of exposing the full card number. [How to add and manage your customer’s cards on file](https://docs.ghlcustomercare.com/docs/payments/getting-started-w-payments/how-to-add-and-manage-your-customer-s-cards-on-file) **Q: Can I assign the Card Details field to a specific signer?** Yes. Use the **To be filled by** dropdown in the Properties panel to assign the field to the correct signer. --- ### **Related** **Articles** - [How to use Documents & Contracts?](https://docs.ghlcustomercare.com/docs/documents-and-contracts/documents-and-contracts-2/how-to-use-documents-contracts) - [Automatically Generate Invoices from Signed Documents & Contracts](https://docs.ghlcustomercare.com/docs/documents-and-contracts/documents-and-contracts-2/automatically-generate-invoices-from-signed-documents-contracts) - [How to add and manage your customer’s cards on file](https://docs.ghlcustomercare.com/docs/payments/getting-started-w-payments/how-to-add-and-manage-your-customer-s-cards-on-file) - [Auto Payments for Recurring Invoices](https://docs.ghlcustomercare.com/docs/payments/invoices-and-estimates/auto-payments-in-recurring-templates) - [Send Contracts & Proposals Using Workflows in GHL Customer Care](https://docs.ghlcustomercare.com/docs/documents-and-contracts/documents-and-contracts-2/how-to-create-and-send-document-or-contract-templates-automatically-in-a-workflo) - [Documents & Contracts: How to automate sending invoices when documents are signed](https://docs.ghlcustomercare.com/docs/documents-and-contracts/documents-and-contracts-2/documents-contracts-how-to-automate-sending-invoices-when-documents-are-signed) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com