diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index dc798ef..8d569ae 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -1,6 +1,8 @@
-import { useState } from 'react';
-
-import { usePayment, useTrip, useTranslation } from '../../hooks';
+import {
+ createContext,
+ useContext,
+} from 'react';
+import { usePayment, useTrip, useTranslation, usePaymentTranslations } from '../../hooks';
import { Select } from '../Select';
@@ -8,9 +10,11 @@ import {
wrapper,
headline,
amount,
+ select,
button,
} from './Payment.module.css';
+const PaymentContext = createContext({});
export default function Payment() {
const { t, formatNumber } = useTranslation();
@@ -18,12 +22,26 @@ export default function Payment() {
trip: { cost },
} = useTrip();
const { process } = usePayment();
+ const { recipients } = usePaymentTranslations();
+
+ // Destination is view-only and we'll individually reach out to donors
+ let { recipient } = useContext(PaymentContext);
+ recipient = Object.keys(recipients)[0];
return (
{t('paymentHeadline')}
{formatNumber(cost, 2)} €
-
diff --git a/data/de.json b/data/de.json
index d59fe4d..fa5974e 100644
--- a/data/de.json
+++ b/data/de.json
@@ -6,11 +6,14 @@
"analysis": "Analyse",
"business": "Business",
"calculateEmissions": "Emissionen berechnen",
+ "chooseOrganization": "Organisation auswählen",
"cookieConsentButton": "Cookies Akzeptieren",
"ch4": "Methan",
"co2": "Kohlendioxid",
"destination": "Zielflughafen",
"distance": "Entfernung",
+ "donationRecipient_greenpeace": "Greenpeace unterstützen",
+ "donationRecipient_atmosfair": "Atmosfair unterstützen",
"economy": "Economy",
"emissions": "Emissionen",
"first": "First",
@@ -23,7 +26,7 @@
"passengers": "Passagiere",
"paymentHeadline": "Offsetting-Kosten",
"paymentName": "CO2-Kompensation",
- "paymentDescription": "Flugreise mit diesen Stationen: {{ airports }}",
+ "paymentDescription": "Flugreise mit diesen Stationen: {{ airports }}. Diese Spende wird {{ recipient }}",
"premium": "Economy Premium",
"removeStopover": "Zwischenstop entfernen",
"roundTrip": "Rückflug",
diff --git a/hooks/index.js b/hooks/index.js
index 79f261b..d863ce4 100644
--- a/hooks/index.js
+++ b/hooks/index.js
@@ -1,4 +1,4 @@
-export { usePayment } from './usePayment';
+export { usePayment, usePaymentTranslations } 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
index 5ed303a..19454f1 100644
--- a/hooks/usePayment.js
+++ b/hooks/usePayment.js
@@ -1,36 +1,51 @@
import { useState } from 'react';
+import { useTranslation } from './useTranslation';
-function getPaymentURL(amount) {
- const params = new URLSearchParams({ amount: Number(amount) });
+function getPaymentURL(amount, recipient) {
+ const params = new URLSearchParams({
+ amount: Number(amount),
+ recipient: recipient.replace(/[^a-z]+/gi, '')
+ });
return `/api/payment?${params.toString()}`;
}
-async function fetchPaymentSession(amount) {
- const response = await fetch(getPaymentURL(amount));
+async function fetchPaymentSession(amount, recipient) {
+ const response = await fetch(getPaymentURL(amount, recipient));
return response.ok
? response.json()
: Promise.reject(new Error(response.statusText));
}
-async function processPayment(amount) {
+async function processPayment(amount, recipient) {
try {
const { loadStripe } = await import('@stripe/stripe-js');
const [stripe, { sessionId }] = await Promise.all([
loadStripe(window.stripeKey),
- fetchPaymentSession(amount),
+ fetchPaymentSession(amount, recipient),
]);
stripe.redirectToCheckout({ sessionId });
} catch (error) {
console.error(error);
}
-}
+}
+
export function usePayment() {
const [processing, setProcessing] = useState(false);
- const process = (amount) => {
+ const process = (amount, recipient) => {
if (processing) return;
setProcessing(true);
- processPayment(amount);
+ processPayment(amount, recipient);
};
return { processing, process };
}
+
+export function usePaymentTranslations() {
+ const { t } = useTranslation();
+ return {
+ recipients: {
+ atmosfair: t("donationRecipient_atmosfair"),
+ greenpeace: t("donationRecipient_greenpeace"),
+ }
+ };
+}
\ No newline at end of file
diff --git a/pages/api/payment.js b/pages/api/payment.js
index 5c42e81..d4e78ef 100644
--- a/pages/api/payment.js
+++ b/pages/api/payment.js
@@ -1,6 +1,6 @@
import Stripe from 'stripe';
-import { useTranslation } from '../../hooks';
+import { usePaymentTranslations, useTranslation } from '../../hooks';
const stripe = new Stripe(process.env.STRIPE_PRIVATE_KEY);
@@ -10,16 +10,20 @@ const getSuccessUrl = (referer) => {
return url.toString();
};
-const getDescription = (referer) => {
+const getDescription = (referer, recipient) => {
const { t } = useTranslation();
const url = new URL(referer);
const trip = url.searchParams.get('a') || '';
- return t('paymentDescription').replace('{{ airports }}', trip.split(',').join(', '));
+
+ return t('paymentDescription')
+ .replace('{{ airports }}', trip.split(',').join(', '))
+ .replace('{{ recipient }}', recipient);
};
export default async (req, res) => {
const { t } = useTranslation();
- const { amount } = req.query;
+ const { recipients } = usePaymentTranslations();
+ const { amount, recipient } = req.query;
const { referer } = req.headers;
const { id: sessionId } = await stripe.checkout.sessions.create({
submit_type: 'donate',
@@ -27,7 +31,7 @@ export default async (req, res) => {
line_items: [
{
name: t('paymentName'),
- description: getDescription(referer),
+ description: getDescription(referer, recipients[recipient.replace(/[^a-z]+/gi, '')]),
amount: amount * 100,
currency: 'eur',
quantity: 1,