diff --git a/.env.local b/.env.local
deleted file mode 100644
index 61b4d79..0000000
--- a/.env.local
+++ /dev/null
@@ -1 +0,0 @@
-# GA_MEASUREMENT_ID=UA-169820463-3
diff --git a/.gitignore b/.gitignore
index 1f1d315..bc8c3c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
-.next
-node_modules
+/.next
+/node_modules
+/.env
diff --git a/components/Itinerary/Itinerary.js b/components/Itinerary/Itinerary.js
index bf20b6a..ad8bead 100644
--- a/components/Itinerary/Itinerary.js
+++ b/components/Itinerary/Itinerary.js
@@ -13,36 +13,52 @@ import {
   lines,
 } from './Itinerary.module.css';
 
-export default function Itinerary() {
+export default function Itinerary({linkToEdit}) {
   const { query } = useRouter();
   const { t, formatNumber } = useTranslation();
   const {
     trip: { airports, distance, flightClass, passengers },
   } = useTrip();
+
+  const WrappedAirportCard = (airport, key) =>
+    <div className={airportWrapper} key={key}>
+      <AirportCard airport={airport} />
+    </div>;
+
+  const stats =
+    <Lines
+      className={lines}
+      items={{
+        [t('distance')]: `${formatNumber(distance, 1)} km`,
+        [t('passengers')]: passengers,
+        [t('flightClass')]: t(flightClass),
+      }}
+    />;
+
   return (
     <>
       <h3 className={headline}>{t('itinerary')}</h3>
-      {airports.map((airport, index) => (
-        <Link href={{ pathname: '/', query }} key={index}>
+      {linkToEdit
+      ?
+      <>
+        {airports.map((airport, index) => (
+          <Link href={{ pathname: '/', query }} key={index}>
+            <a className={formlink}>
+              {WrappedAirportCard(airport, index)}
+            </a>
+          </Link>
+        ))}
+        <Link href={{ pathname: '/', query }}>
           <a className={formlink}>
-            <div className={airportWrapper}>
-              <AirportCard airport={airport} />
-            </div>
+            {stats}
           </a>
         </Link>
-      ))}
-      <Link href={{ pathname: '/', query }}>
-        <a className={formlink}>
-          <Lines
-            items={{
-              [t('distance')]: `${formatNumber(distance, 1)} km`,
-              [t('passengers')]: passengers,
-              [t('flightClass')]: t(flightClass),
-            }}
-            className={lines}
-          />
-        </a>
-      </Link>
+        </>
+      : <>
+        {airports.map(WrappedAirportCard)}
+        {stats}
+        </>
+      }
     </>
   );
 }
diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index eee08d2..dc798ef 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useTrip, useTranslation } from '../../hooks';
+import { usePayment, useTrip, useTranslation } from '../../hooks';
 
 import { Select } from '../Select';
 
@@ -8,61 +8,24 @@ import {
   wrapper,
   headline,
   amount,
-  select,
   button,
 } from './Payment.module.css';
 
-function usePayment() {
-  const { t, formatNumber } = useTranslation();
-  const {
-    trip: { cost },
-  } = useTrip();
-  const [recipient, setRecipient] = useState('trees');
-  const getUrl = () => {
-    const amount = formatNumber(cost, 2);
-    const language = t('lang');
-    switch (recipient) {
-      case 'trees':
-        return `https://donorbox.org/trees-for-lure?amount=${amount}&language=${language}`;
-      case 'greenpeace':
-        return `https://www.greenpeace.de/spenden?betrag=${amount}`;
-      default:
-        throw new Error('unknown recipient');
-    }
-  };
-  return {
-    options: {
-      trees: t('donateTrees'),
-      greenpeace: t('donateToGreenpeace'),
-    },
-    value: recipient,
-    onChange: setRecipient,
-    href: getUrl(),
-  };
-}
 
 export default function Payment() {
   const { t, formatNumber } = useTranslation();
   const {
     trip: { cost },
   } = useTrip();
-  const { options, value, onChange, href } = usePayment();
+  const { process } = usePayment();
+
   return (
     <div className={wrapper}>
       <h3 className={headline}>{t('paymentHeadline')}</h3>
       <p className={amount}>{formatNumber(cost, 2)} €</p>
-      <Select
-        value={value}
-        options={options}
-        onChange={onChange}
-        invert={true}
-        hideLabel={true}
-        className={select}
-        label={t('chooseOrganization')}
-      />
-      <a href={href} className={button}>
+      <button className={button} onClick={()=> process(cost)}>
         {t('makeDonation')}
-      </a>
+      </button>
     </div>
   );
 }
diff --git a/components/ThankYou/ThankYou.js b/components/ThankYou/ThankYou.js
new file mode 100644
index 0000000..e557dd5
--- /dev/null
+++ b/components/ThankYou/ThankYou.js
@@ -0,0 +1,12 @@
+import { useTranslation } from '../../hooks';
+
+export default function ThankYou() {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h3>{t('thankYouHeadline')}</h3>
+      <p>{t('thankYouDescription')}</p>
+    </div>
+  );
+}
diff --git a/components/ThankYou/index.js b/components/ThankYou/index.js
new file mode 100644
index 0000000..4a84688
--- /dev/null
+++ b/components/ThankYou/index.js
@@ -0,0 +1 @@
+export { default as ThankYou } from './ThankYou';
diff --git a/components/index.js b/components/index.js
index 147dfbc..3306b8a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -6,3 +6,4 @@ export { TripForm } from './TripForm';
 export { Itinerary } from './Itinerary';
 export { Payment } from './Payment';
 export { EmissionData } from './EmissionData';
+export { ThankYou } from './ThankYou';
diff --git a/data/de.json b/data/de.json
index 76e0419..d59fe4d 100644
--- a/data/de.json
+++ b/data/de.json
@@ -6,14 +6,11 @@
   "analysis": "Analyse",
   "business": "Business",
   "calculateEmissions": "Emissionen berechnen",
-  "chooseOrganization": "Organisation auswählen",
   "cookieConsentButton": "Cookies Akzeptieren",
   "ch4": "Methan",
   "co2": "Kohlendioxid",
   "destination": "Zielflughafen",
   "distance": "Entfernung",
-  "donateToGreenpeace": "Greenpeace unterstützen",
-  "donateTrees": "Bäume pflanzen",
   "economy": "Economy",
   "emissions": "Emissionen",
   "first": "First",
@@ -25,10 +22,14 @@
   "origin": "Abflughafen",
   "passengers": "Passagiere",
   "paymentHeadline": "Offsetting-Kosten",
+  "paymentName": "CO2-Kompensation",
+  "paymentDescription": "Flugreise mit diesen Stationen: {{ airports }}",
   "premium": "Economy Premium",
   "removeStopover": "Zwischenstop entfernen",
   "roundTrip": "Rückflug",
   "stopover": "Zwischenstopp",
   "trees": "Baum-Äquivalent",
+  "thankYouHeadline": "Danke für's Spenden!",
+  "thankYouDescription": "Die Spendenquittung kommt im nächsten Januar per E-Mail. 💚",
   "yes": "Ja"
 }
diff --git a/hooks/index.js b/hooks/index.js
index b5ff0bd..79f261b 100644
--- a/hooks/index.js
+++ b/hooks/index.js
@@ -1,3 +1,4 @@
+export { usePayment } from './usePayment';
 export { useSuggestions } from './useSuggestions';
 export { useTracking, withTracking } from './useTracking';
 export { useTranslation, withTranslation } from './useTranslation';
diff --git a/hooks/usePayment.js b/hooks/usePayment.js
new file mode 100644
index 0000000..5ed303a
--- /dev/null
+++ b/hooks/usePayment.js
@@ -0,0 +1,36 @@
+import { useState } from 'react';	
+
+function getPaymentURL(amount) {	
+  const params = new URLSearchParams({ amount: Number(amount) });	
+  return `/api/payment?${params.toString()}`;	
+}	
+
+async function fetchPaymentSession(amount) {	
+  const response = await fetch(getPaymentURL(amount));	
+  return response.ok	
+    ? response.json()	
+    : Promise.reject(new Error(response.statusText));	
+}	
+
+async function processPayment(amount) {	
+  try {	
+    const { loadStripe } = await import('@stripe/stripe-js');	
+    const [stripe, { sessionId }] = await Promise.all([	
+      loadStripe(window.stripeKey),	
+      fetchPaymentSession(amount),	
+    ]);	
+    stripe.redirectToCheckout({ sessionId });	
+  } catch (error) {	
+    console.error(error);	
+  }	
+}	
+
+export function usePayment() {	
+  const [processing, setProcessing] = useState(false);	
+  const process = (amount) => {	
+    if (processing) return;	
+    setProcessing(true);	
+    processPayment(amount);	
+  };	
+  return { processing, process };	
+}
diff --git a/package.json b/package.json
index f019f49..f80172f 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@mdx-js/loader": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
     "@next/mdx": "^9.5.2",
+    "@stripe/stripe-js": "^1.11.0",
     "@turf/distance": "^6.0.1",
     "browserslist": "^4.14.0",
     "cookie": "^0.4.1",
@@ -42,7 +43,8 @@
     "postcss-preset-env": "^6.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "snakecase-keys": "^3.2.0"
+    "snakecase-keys": "^3.2.0",
+    "stripe": "^8.130.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^9.1.2",
diff --git a/pages/_document.js b/pages/_document.js
index c45c9f7..b6062e5 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -6,12 +6,13 @@ export default withTranslation(
   class FlygoodDocument extends Document {
     static async getInitialProps(ctx) {
       const initialProps = await Document.getInitialProps(ctx);
+      const stripeApiKey = process.env.STRIPE_PUBLIC_KEY;
       const trackingId = process.env.GA_MEASUREMENT_ID;
       const mapboxToken = process.env.MAPBOX_TOKEN;
-      return { ...initialProps, trackingId, mapboxToken };
+      return { ...initialProps, trackingId, stripeApiKey, mapboxToken };
     }
     render() {
-      const { trackingId, mapboxToken, t } = this.props;
+      const { stripeApiKey, trackingId, mapboxToken, t } = this.props;
       return (
         <Html>
           <Head lang={t('lang')}>
@@ -49,6 +50,13 @@ export default withTranslation(
           <body>
             <Main />
             <NextScript />
+            {stripeApiKey ? (	
+              <script	
+                dangerouslySetInnerHTML={{	
+                  __html: `window.stripeKey = "${stripeApiKey}";`,	
+                }}	
+              />	
+            ) : null}
             {trackingId ? (
               <script
                 dangerouslySetInnerHTML={{
diff --git a/pages/api/payment.js b/pages/api/payment.js
new file mode 100644
index 0000000..5c42e81
--- /dev/null
+++ b/pages/api/payment.js
@@ -0,0 +1,40 @@
+import Stripe from 'stripe';	
+
+import { useTranslation } from '../../hooks';
+
+const stripe = new Stripe(process.env.STRIPE_PRIVATE_KEY);	
+
+const getSuccessUrl = (referer) => {	
+  const url = new URL(referer);	
+  url.pathname = 'success';	
+  return url.toString();	
+};	
+
+const getDescription = (referer) => {	
+  const { t } = useTranslation();
+  const url = new URL(referer);	
+  const trip = url.searchParams.get('a') || '';	
+  return t('paymentDescription').replace('{{ airports }}', trip.split(',').join(', '));	
+};	
+
+export default async (req, res) => {
+  const { t } = useTranslation();
+  const { amount } = req.query;	
+  const { referer } = req.headers;	
+  const { id: sessionId } = await stripe.checkout.sessions.create({	
+    submit_type: 'donate',	
+    payment_method_types: ['card'],	
+    line_items: [	
+      {	
+        name: t('paymentName'),	
+        description: getDescription(referer),	
+        amount: amount * 100,
+        currency: 'eur',
+        quantity: 1,
+      },	
+    ],	
+    success_url: getSuccessUrl(referer),	
+    cancel_url: referer,	
+  });	
+  res.json({ sessionId });	
+};
diff --git a/pages/success.js b/pages/success.js
new file mode 100644
index 0000000..55d7d6c
--- /dev/null
+++ b/pages/success.js
@@ -0,0 +1,23 @@
+import Info from '../contents/info.md';
+
+import { Section, Itinerary, ThankYou, EmissionData } from '../components';
+import { withTrip } from '../hooks';	
+
+export default withTrip(function Success() {	
+  return (
+    <>
+      <Section>
+        <Itinerary linkToEdit={false} />
+      </Section>
+      <Section type="action">
+        <ThankYou />
+      </Section>
+      <Section type="content">
+        <EmissionData />
+        <Info />
+      </Section>
+    </>
+  );
+});	
+
+export { loadTrip as getServerSideProps } from '../hooks';
diff --git a/pages/trip.js b/pages/trip.js
index 8b3e15d..81fcefb 100644
--- a/pages/trip.js
+++ b/pages/trip.js
@@ -7,7 +7,7 @@ export default withTrip(function Trip() {
   return (
     <>
       <Section>
-        <Itinerary />
+        <Itinerary linkToEdit={true} />
       </Section>
       <Section type="action">
         <Payment />
diff --git a/readme.md b/readme.md
index f087cbd..4e26769 100644
--- a/readme.md
+++ b/readme.md
@@ -1,3 +1,15 @@
-# TBD
+# FlyGood (TBD)
 
 To Be Documented.
+
+# Local development
+
+1. Install dependencies
+```sh
+yarn
+```
+2. Create `/.env` file based on `/.env.template`
+3. Run
+```sh
+yarn develop
+```
diff --git a/yarn.lock b/yarn.lock
index 5951305..9c629a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1384,6 +1384,11 @@
   dependencies:
     mkdirp "^1.0.4"
 
+"@stripe/stripe-js@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.11.0.tgz#00e812d72a7760dae08237875066d263671478ee"
+  integrity sha512-SDNZKuETBEVkernd1tq8tL6wNfVKrl24Txs3p+4NYxoaIbNaEO7mrln/2Y/WRcQBWjagvhDIM5I6+X1rfK0qhQ==
+
 "@turf/distance@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@turf/distance/-/distance-6.0.1.tgz#0761f28784286e7865a427c4e7e3593569c2dea8"
@@ -1433,6 +1438,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
   integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
+"@types/node@>=8.1.0":
+  version "14.14.20"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.20.tgz#f7974863edd21d1f8a494a73e8e2b3658615c340"
+  integrity sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -5837,6 +5847,11 @@ q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qs@^6.6.0:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
+  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -6696,6 +6711,14 @@ strip-json-comments@^3.1.0:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+stripe@^8.130.0:
+  version "8.130.0"
+  resolved "https://registry.yarnpkg.com/stripe/-/stripe-8.130.0.tgz#e52a5ee6538a70ce76379364bd3839ca7ea925ab"
+  integrity sha512-9e283EFhxDz7SUcgNiUFRdTZ/kS2IkoT0KBMOJHdf3vY+mvURq355s2E0Zyy9rtNmt+CEZ0nCMiZ3PqIqpp6Pg==
+  dependencies:
+    "@types/node" ">=8.1.0"
+    qs "^6.6.0"
+
 style-loader@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"