README

This package provides a graphql shop that can be managed through the voyager admin panel.

Installation

Just run the following command.

php artisan voyager-shop:install

Update the used traits on the User Model.

<?php

namespace App;

use Laravel\Cashier\Billable;
use Laravel\Passport\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Tjventurini\VoyagerProjects\Traits\HasProjects;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Tjventurini\VoyagerShop\Traits\Relationships\HasOrders;
use Tjventurini\VoyagerShop\Traits\Relationships\HasManyCards;
use Tjventurini\VoyagerShop\Traits\Relationships\HasManyAddresses;

class User extends \TCG\Voyager\Models\User
{
    use HasApiTokens, Notifiable, HasOrders, HasProjects, HasManyCards, HasManyAddresses, Billable;

    ...

Add stripe keys to the .env file.

STRIPE_KEY=your-public-key
STRIPE_SECRET=your-secret-key

If you don't use USD as your default currency you should add set the your default currency in the .env file.

CASHIER_CURRENCY=eur

For more information about the payment implementation check out the Laravel Cashier Documentation.

To setup the stripe webhooks you need to set your STRIPE_WEBHOOK_SECRET in the .env file aswell.

STRIPE_WEBHOOK_SECRET=your-webhook-secret

For more information about the webhooks implementation check out the spatie/laravel-stripe-webhooks package documentation on github.

Frontend Example

Here is a sample implementation of the stripe.js framework to get a payment method.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stripe Sample</title>

    <style>
        .checkout-form {
            width: 500px;
            margin: auto;
        }
        .checkout-form input {
            width: 100%;
        }
        .checkout-form button {
            float: right;
        }
    </style>
</head>
<body>

    <div class="checkout-form">
        <h1>Charge $ 10</h1>
        <p>Stripe sample for one time payments.</p>

        <input id="card-holder-name" type="text" placeholder="Name auf der Karte">

        <!-- Stripe Elements Placeholder -->
        <div id="card-element"></div>

        <button id="card-button">
            Process Payment
        </button>
    </div>

    <script src="https://js.stripe.com/v3/"></script>

    <script>
        const stripe = Stripe('{{ config("services.stripe.key") }}');

        const elements = stripe.elements({locale: 'de', country: 'AT'});
        const cardElement = elements.create('card');

        cardElement.mount('#card-element');

        const cardHolderName = document.getElementById('card-holder-name');
        const cardButton = document.getElementById('card-button');

        cardButton.addEventListener('click', async (e) => {
            const { paymentMethod, error } = await stripe.createPaymentMethod(
                'card', cardElement, {
                    billing_details: { name: cardHolderName.value }
                }
            );

            if (error) {
                alert('error');
                console.log(error);
            } else {
                alert('works');
                console.log(paymentMethod);
            }
        });
    </script>

</body>
</html>

Documentation

Please read the full Documentation before using this package in production.

devig / voyager-shop

Maintainers

Details

README

Installation

Frontend Example

Documentation