In this quickstart you will go from installation of SDKs to running a crypto payment transaction through the checkout widget running locally. For this example we will be installing two items:

  1. [Circle's Node.js SDK](🔗) (optional)

  2. [Checkout Widget SDK](🔗)

# 1. Get an API key

The Circle Payments API uses API keys as the mechanism to authenticate client requests. The API key must be set in the `Authorization` header of the request sent from your backend server. The format of the header is `Bearer secret-key-value`.

[Learn more about authenticating API calls here](🔗).

To obtain an API key for the sandbox environment, simply create an account and generate a new key in settings - it only takes a few seconds.

(Script tags will be stripped)




Once you have generated your API key, record it in a secure place.

# 2. Local Setup

Circle Node.js SDK assist you in quickly getting your codebase up and running with Circle APIs.

## Server side

The easiest way to add Circle’s Widget SDK is through [NPM](🔗). You can run one of the two commands below from your project directory to install the SDK:





Initialize the API driver, providing your API key and environment. To create a sandbox account and acquire an API key please visit [https://app-sandbox.circle.com](🔗).





If you are not interested in using Node.js SDK you can also integrate directly to our RESTful APIs. Throughout this quickstart we will provide instructions on how to use either or.

## Client side

Circle [Checkout Widget SDK](🔗) is a client side Javascript SDK. You can install it through NPM by running the following command.





### Additional dependencies for Create React App

Currently create-react-app (CRA) doesn’t build the checkout widget and its dependencies correctly due to CRA5 no longer having polyfills by default, this causes some of the SDK’s dependencies to break. To handle this please do the following:

  1. Add `react-app-rewired`. This allows you to add more configuration values to the existing `react-scripts` that CRA comes with by default.





The above lines simply install and save in the dev dependencies package. Then replace all instances of `react-scripts` with `react-app-rewired` within your `package.json`. Finally, it creates a `config-overrides.js` file as a place for us to override some webpack config values.





  1. Open up `config-overrides.js` and add the following:





This code tells webpack how to properly build the SDK and its dependencies. It requires some installed libraries however, so go back into `package.json` and add the following packages to the dependencies list:





With these added the full dependencies list should look something like this:







The versions listed above are not a specific requirement, just what was used at the time of writing. Feel free to use different versions if you like.

  1. Save all these changed files and run a `npm install`.

# 3. Create a Checkout Session

Once the customer has indicated they would like to checkout you will create checkout session from your server side app to acquire a `clientToken` and `id`.









# 4. Create Circle Checkout

Use Circle's Widget SDK to create a checkout component on your app to show the available payment methods, and to collect payment from your consumers.





To customize the widget to match the design you pass in the options object. See [SDK reference](🔗) for more detail.

# 5. Payment Settlement

A notification in the structure below is sent on checkout session completion.





# 6. Merchant Dashboard

Also, you can use our merchant dashboard to check the status of checkout sessions.



# 7. Ready for the next step?

If you are in advanced stages of experimenting with our APIs and want to plan moving to production, please start by [applying for a Circle Account](🔗) and subsequently [reach out to sales](🔗). We'll be happy to walk you through to the next steps.

We can't wait to see what you are going to build!