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'
        ));
    }
}