Getting started

OrderCard is invite-only during the beta. Once you have accepted your invitation and signed in at 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, 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.

3. Add hosted fields to your checkout

<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

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 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.

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 as they happen. Verify the signature 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.