---
title: "Getting started"
description: "From a new account to a first sandbox charge in five steps."
image: "https://docs.ordercard.io/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.ordercard.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting started

OrderCard is invite-only during the beta. Once you have accepted your invitation and signed in at [app.ordercard.io](https://app.ordercard.io), make sure the environment switch at the top of the dashboard says **Sandbox**. Everything below happens in sandbox, where no real money moves.

## 1. Create API keys

Open **Developers → API keys** and create two keys:

- A **publishable key** for your checkout page. List the website origins that will load the payment form, for example `https://shop.example.com` or `http://localhost:3000`.
- A **secret key** for your server, with the **Charge only** preset. Copy it now: it is shown once.

## 2. Connect a gateway

Open **Gateways**, click **Connect a gateway** and pick **Test gateway**. It answers like a real processor, from the [test card list](/testing), without any account. Note its id (`gw_…`).

When you are ready for a real processor, connect your Fortis, NMI, Authorize.net, Converge or Deluxe sandbox account the same way. See [Gateways](/gateways).

## 3. Add hosted fields to your checkout

```html
<div id="card"></div>
<button id="pay">Pay</button>

<script
  src="https://secure.ordercard.io/v1/ordercard-1.0.1.js"
  integrity="sha384-QBnpuSP7J012rvvj6klsOBsjIaT4qqalwBd1UgQkFNB5/GtRp6pP/2HA+4LNZvIE"
  crossorigin="anonymous"
></script>
<script>
  const card = OrderCard.init("oc_pk_test_…", { container: "#card" });

  document.querySelector("#pay").addEventListener("click", async () => {
    try {
      const { token } = await card.tokenize();
      await fetch("/checkout", { method: "POST", body: JSON.stringify({ token }) });
    } catch (errors) {
      console.log(errors); // [{ attribute, key, message }]
    }
  });
</script>
```

Enter `4242 4242 4242 4242`, any future expiry and any CVV. You get a token like `tok_01jaxqk0pz7r8w5m3n2b4c6d8e`. To try the form without building a page, use **Developers → Try hosted fields** in the dashboard.

## 4. Charge the token from your server

```bash
curl -X POST https://api.ordercard.io/v1/gateways/gw_…/purchase \
  -H "Authorization: Bearer $ORDERCARD_SECRET_KEY" \
  -H "Idempotency-Key: order-1001" \
  -H "Content-Type: application/json" \
  -d '{ "payment_method_token": "tok_…", "amount": 2500, "reference": "order-1001", "customer_reference": "user_1001" }'
```

`customer_reference` is your own id for the shopper; OrderCard files the card under that [customer](/api/customers) once the charge succeeds. Always send it from your server, never from the browser.

A `201` response is a successful charge of $25.00. A declined card answers `402` with the reason; try `4000 0000 0000 9995` to see `insufficient_funds`.

The charge also **retains** the card, so you can charge it again later, for example for a subscription, by sending the same token with `"initiator": "recurring"`. See [Stored cards](/payments/stored-cards).

## 5. Listen for events

Open **Developers → Webhooks**, add your endpoint's URL and copy its signing secret. OrderCard posts `transaction.succeeded`, `transaction.declined` and the other [events](/webhooks) as they happen. [Verify the signature](/webhooks/signatures) on each one.

## Going live

1. Choose a plan under **Team → Billing** (live mode needs one).
2. Switch the dashboard to **Live**, connect your live gateway account and create live keys.
3. Replace the `oc_pk_test_` and `oc_sk_test_` keys with the live ones. Nothing else in your code changes.

Source: https://docs.ordercard.io/getting-started/index.mdx