OpenLitterMap/openlittermap-web

{
    //
    "require": {
        "php": "^7.3",
       //
        "stripe/stripe-php": "^7.49"
    },
    //
}

use Illuminate\Support\Facades\Route;

//
Route::post('donate', 'DonateController@submit');
//

<template>
	<div>
		<loading v-if="loading" :active.sync="loading" :is-full-page="false" />
		<div v-else class="box">
			<h3 class="title is-2 mb1em">
				<strong style="color: #363636;">Select an amount:</strong>
			</h3>
			<div class="grid-container has-text-centered">
				<div v-for="amount in amounts">
					<div class="box" style="background-color: lightgreen;">
						<h3 class="title is-3 mb1em">
							<strong>€{{ amount.amount / 100 }}</strong>
						</h3>
						<button class="button is-medium is-primary" @click="donate(amount.id)">Donate now</button>
					</div>
				</div>
			</div>
			<h3 class="title is-1" style="text-align: right;">
				<strong style="color: #363636;">Thank you.</strong>
			</h3>
		</div>
	</div>
</template>

<script>
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

export default {
    name: 'DonateButtons',
    components: { Loading },
    data () {
        return {
            stripeEmail: '',
            stripeToken: '',
            amount: '',
            loading: true
        }
    },
    async created ()
	{
        this.loading = true;

        await this.$store.dispatch('GET_DONATION_AMOUNTS');

        this.$emit('donations-loaded')

        this.loading = false;
	},
	computed: {
		amounts ()
		{
			return this.$store.state.donate.amounts;
		}
	},
	methods: {
		donate (price)
		{
			this.amount = this.prices[price] * 100;
			this.stripe = StripeCheckout.configure({
				key: OLM.stripeKey,
				image: "https://stripe.com/img/documentation/checkout/marketplace.png",
				locale: "auto",
				panelLabel: "One-time Donation",
				// email: this.email,

				token: (token) => { // use the arrow ES15 syntax to make this local
					this.stripeToken = token.id,
					this.stripeEmail = token.email;
					axios.post('/donate', this.$data)
						 .then(response => {
							alert('Congratulations! Your payment was successful. Thanks!');
						 })
						 .catch(error => {
							alert('Sorry, there was an error processing your card! You have not been charged. Please try again');
						 });
				}
			});
			this.stripe.open({
				name: '€'+this.prices[price],
				description: 'OpenLitterMap',
				zipCode: false,
				amount: this.prices[price] * 100,
			});
		}
	}
}
</script>

use Stripe\Charge;
use Stripe\Customer;
use Stripe\Stripe;
use Illuminate\Http\Request;

class DonateController extends Controller
{
    //
    protected function doPayment($token, $email, $amount)
    {
        Stripe::setApiKey(config('services.stripe.secret'));
        $customer = Customer::create(array(
            'email' => $email,
            'card'  => $token
        ));
        $charge = Charge::create(array(
            'customer' => $customer->id,
            'amount'   => $amount,
            'currency' => 'eur'
        ));
    }
}