Payments

If you haven't already, please set up Stripe by following the Stripe setup guide. You also need to set up a Database.

We provide payment functionality for both one-time payments (checkout) and subscriptions.

Checkout session

1. Go to Products and copy the price id from the product you want to use (example: price_1Oig4tF0OUXipSzGYnvsYC1U)
2. If you're using the Pricing component, add the checkout.one-off route with the price id to the href prop, like this:

   <Pricing 
       name="Enterprise"
       :href="route('checkout.one-off', 'price_1Oig4tF0OUXipSzGYnvsYC1U')"
       button-text="Buy"
       description="Dedicated support and infrastructure for your company"
       price="99"
       price-suffix="/month"
   />

3. Clicking the button will redirect the user to the checkout page where they can fill in their payment details and complete the purchase.
4. After the purchase is completed, the user will be redirected to the success_url you provided in the checkout session. By default this route: /checkout/success
5. Stripe will notify your application about the payment through a webhook. If you want to you can handle the webhook in the StripeEventListener. E.g. send a confirmation email to the user.

Subscriptions

Subscriptions are a bit more complex than one-off payments. We have tried to make a simple example that makes it easy to setup subscriptions and change it for your needs.

1. Go to Products and copy the price id from the product you want to use (example: price_1Oig4tF0OUXipSzGYnvsYC1U)
2. Add the price id to the .env file

   STRIPE_SUBSCRIPTION_PRICE_ID=price_1Oig4tF0OUXipSzGYnvsYC1U

3. Add the SubscriptionToggleButton component to a page of your choice. The button will toggle the subscription on and off.

import SubscriptionToggleButton from '@/Components/SubscriptionToggleButton.vue';

4. When clicking the button, the user will be redirected to the checkout page where they can fill in their payment details and complete the subscription.
5. After the subscription is completed, the user will be redirected to the success_url you provided in the checkout session. By default this route: /dashboard.
6. The user will also receive a confirmation email sent from the StripeEventListener. You can either change the content of the mail or remove it completely, it's up to you. The mail template can be found here /resources/views/mail/subscriptions/created.blade.php.
7. The subscription can now be cancelled by clicking the Cancel button (located the same place as the Subscriptionbutton previously).
8. When the subscription is cancelled, the user will receive a confirmation email sent from the SubscriptionController@cancel method. The mail template can be found here /resources/views/mail/subscriptions/canceled.blade.php.

This was just a simple example of how to set up subscriptions. You can change the content of the emails, the routes and the functionality to fit your needs.