Learn about charging a card on file with Strong Customer Authentication (SCA).
Docs Home
Dev Essentials
Payments Commerce Customers Staff Merchants
Partnerships
Release notes

Docs

Docs Home
Dev Essentials
Payments
Commerce
Customers
Staff
Merchants
Partnerships
Release notes
Docs
Web Payments SDK

Charge a Card on File with SCA

Learn how to charge a card on file with SCA (Strong Customer Authentication) on your application.

The steps in this topic add code to the application you created (with a card payment) from the Quickstart project sample, as documented in Take a Card Payment with the Web Payments SDK. If you haven't created an application using the Quickstart, you need to do so before completing the following steps.

You can see a complete code example in the Web Payments Quickstart on GitHub.

Link to section
Implement the functionality to charge a card on file

Link to section
Step 1: Update the payment form

The form inputs take the customer ID and card ID associated with a customer.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
<body>
  <form id="payment-form">
    <input
      id="customer-input"
      type="text"
      aria-required="true"
      aria-label="Customer ID"
      required="required"
      placeholder="Customer ID"
      name="customerId"
    />
    <input
      id="card-input"
      type="text"
      aria-required="true"
      aria-label="Card ID"
      required="required"
      placeholder="Card ID"
      name="cardId"
    />
    <button id="card-button" type="button">Pay $1.00</button>
  </form>
  <div id="payment-status-container"></div>
</body>

Link to section
Step 2: Update the event handler to accept IDs

Note

All subsequent steps make revisions to the code inside the