# Demo: A donation with every order: Museum shop

> A museum shop gives 2 € on every order over 50 € of prints or books. The shop pays; the visitor picks the charity on the confirmation page or later, from their order history.

One variant of **A donation with every order**, in Culture and events: 2 € for every order over 50 €, or 1 % of each order.

A made-up site, shop.your-museum.example/checkout, walked through screen by screen with the Charitips API calls the product makes at each step. Rebuild it in your own project to start from a working flow.

The charity choice in this demo is the Charitips [charity selection widget](https://www.charitips.com/docs/widgets/charity_selection.md), a ready-made proposal. Use it whole, use parts of it, or build your own experience from scratch with the API: [List charities](https://www.charitips.com/docs/api-reference/list-charities.md) gives the charities to show, and the calls below carry the chosen `charityId`.

Charitips widget: the charity cards and their profiles. Your own UI, built with the API: the order confirmation, the button that gives the donation and the card that confirms it.

The full guide, with edge cases: https://www.charitips.com/docs/use-cases/donation-per-order.md.

**Once, before the first customer:**

- [`POST /v1/charities-selections`](https://www.charitips.com/docs/api-reference/create-charities-selection.md) Create a charities selection: once: the charities you offer, from the catalog

  ```json
  {
    "name": "Museum shop charities",
    "charityIds": [
      "<charityId>"
    ]
  }
  ```
- [`POST /v1/campaigns`](https://www.charitips.com/docs/api-reference/create-campaign.md) Create a campaign: once: the campaign the donations go to

  ```json
  {
    "name": "Museum shop donations",
    "charitiesSelectionId": "<charitiesSelectionId>"
  }
  ```
- [`POST /v1/campaigns/{campaignId}/activate`](https://www.charitips.com/docs/api-reference/activate-campaign.md) Activate a campaign: once: the campaign starts taking donations

## Screens and calls

### 1. Your bag

Orders over 50 € give 2 € to a charity the customer chooses. Under 50 €, no donation is created.

- Exhibition tote bag: 22,00 €
- Poster mug × 2: 32,00 €
- Delivery: Free
- **Total: 54,00 €**
- Button: Pay 54,00 €

**Your server calls:**

- [`POST /v1/donations`](https://www.charitips.com/docs/api-reference/create-donation.md) Create a donation: from your payment webhook, once the order is paid; amount in cents. Keep the donationId with the order: the order page and your confirmation email bring the customer back to the choice

  ```json
  {
    "campaignId": "<campaignId>",
    "amount": 200,
    "uniqueExternalId": "order_5518"
  }
  ```

Charitips then sends the `donation_create` webhook to your endpoint.

### 2. Thank you. Choose the charity for your 2 €

The confirmation page offers a short choice of charities. Not now? The order history brings the customer back, and without a choice the donation still goes to one of the charities: none is lost.

- The customer picks a charity from your selection.
- Button: Give 2 € to the charity

**Your server calls:**

- [`POST /v1/donations/{donationId}/claim`](https://www.charitips.com/docs/api-reference/claim-donation.md) Claim a donation: donationId from the create-donation response

  ```json
  {
    "charityId": "<charityId>"
  }
  ```

Charitips then sends the `donation_update` webhook to your endpoint.

### 3. Your orders

Your server reads the donation_update webhook and keeps the charity on the order. An order still waiting for a choice offers it again.

- Button: Start again

No call: this screen only shows the result.

## Clone it with a coding agent

```prompt
Clone the Charitips demo "A donation with every order: Museum shop" into this project. Read https://www.charitips.com/docs/demos/checkout/museum-shop.md: it lists each screen and the Charitips API calls behind it. Build the same flow in this codebase, on the sandbox (https://api.sandbox.charitips.com), with my client id and secret read from environment variables, and follow the rules of https://www.charitips.com/docs/skill.md. Make every API call from the server, never from the browser. When it works, show me each call and its response.
```