Applies to: Web Payments SDK | Payments API
Learn how to get started with the Web Payments SDK for your application to take secure payments and deploy to production.
Use the quickstart sample project to set up a web application that's integrated with the Web Payments SDK for taking payments.
The following video demonstrates how to build an end-to-end payment flow with the credit card payment method and shows the code you use to build the flow. For an optimal viewing experience, expand the video window to a desired size or watch the video on YouTube.
To accept a card payment from a buyer, you need a web client where the buyer enters payment card information and a backend that takes a payment with the card. The SDK produces a secure single-use payment token based on the card. Your web client sends the payment token to your backend where the payment is taken. In summary, a payment is taken with these steps:
- Generate a payment token - Use the Web Payments SDK client library to render a card entry form and generate a payment token that your web client sends to your backend server.
- Create a payment with the token - On your backend, use the Square Payments API to create a payment.
This quickstart shows where to add HTML and JavaScript to your web client to integrate the Web Payments SDK and take a payment on your backend.
You can find a complete example of the Card payment code on GitHub.
Important
If you're not familiar with building an application using Square client-side SDKs, Square recommends completing this quickstart using the GitHub project before you attempt to integrate the Web Payments SDK into your application.
The following shows the card payment method rendered in a web page:
The payment method doesn't initially render input fields for the name or billing address. When you initially set up the payment method, you don't need to include input fields for contact information (name and billing information). You only need to set up payment processing with fields for the credit card number, expiration date, the CVV (card verification value), and if required for your region, a ZIP or postal code.
The form automatically recognizes the credit card type as soon as you enter the credit card number and updates the credit card icon as a result to reflect the type being used.
To request the buyer to provide contact information and other additional information for the payment, you can add additional payment form fields to the page layout.