@Blog

const vapidPublicKey = import.meta.env.VITE_VAPID_PUBLIC_KEY;

async function setupPushNotifications() {
    if (Notification.permission === 'granted') {
        try {
            // サービスワーカーを登録
            await navigator.serviceWorker.register('/assets/js/npush-service-worker.js').then(async(registration) => {
                if ('serviceWorker' in navigator && 'PushManager' in window) {
                    try {
                            const subscription = await registration.pushManager.subscribe({
                                userVisibleOnly: true,
                                applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
                            });
            
                            const response = await fetch('/save-subscription', {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
                                },
                                body: JSON.stringify(subscription),
                            });
            
                            if (!response.ok) throw new Error('サブスクリプションの保存に失敗しました');
            
                            new Notification('ご登録', {
                                body: 'ご登録有難う御座います',
                            });
                        
                    } catch (error) {
                        console.error('Push subscription error:', error);
                    }
                } else if (result !== 'granted') {
                    console.log('通知の権限が拒否されました。');
                }       
            });
            console.log('サービスワーカーが正常に登録されました');
        } catch (error) {
            console.error('サービスワーカーの登録に失敗しました:', error);
        }
    }
}


function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

document.getElementById('enable-notifications').addEventListener('click', async () => {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
        setupPushNotifications();
    } else {
        console.log('通知の権限が拒否されました。');
    }
});

        $endpoint = $request->endpoint;
        $token = $request->keys['auth'];
        $key = $request->keys['p256dh'];
        $user = $request->user();
        $user->updatePushSubscription($endpoint, $key, $token);

use App\Notifications\Reserved;
$user = User::find(1);
$user->notify(new Reserved($reservation));

if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.ready.then(function(registration) {
        registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array('VAPID_PUBLIC_KEY')
        }).then(function(subscription) {
            fetch('/api/save-subscription', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(subscription),
            });
        }).catch(function(error) {
            console.error('Push subscription error:', error);
        });
    });
}

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Payjp\Payjp;
use Payjp\Charge;
use Payjp\Customer;
use Payjp\Subscription;

class PaymentController extends Controller
{
    //
    public function index()
    {
        return view('payment.index');
    }

    public function payment(Request $request)
    {
        Payjp::setApiKey(config('app.secret_key'));
        // クレカトークンが送られる(tok_xxxxxxxxxxxxxxxxxxxx)
        $token = $request->input('tokenId');
        $result = Charge::create(array(
            "card" => $token,
            "amount" => 3500,
            "currency" => 'jpy',
            'description' => 'ABC商品',
            'product' => 'ABC',
            'metadata' => [
                'user_id'  => '123',
                'user_name'  => 'あいうえお',
                'email' => 'mail@abc.com'
            ]
        ));
        return back();
    }

    public function subindex()
    {
        return view('payment.subscription');
    }

    public function subscription(Request $request)
    {
        $token = $request->input('tokenId');
        Payjp::setApiKey(config('app.secret_key'));
        // 顧客情報の登録
        $customer = Customer::create(array(
            'email' => 'mail@abc.com',
            'card' => $token, // クライアントから受け取ったトークンを記載します。
            'metadata' => [
                'user_id'  => '123',
                'user_name'  => 'あいうえお',
                'email' => 'mail@example.com'
            ]
        ));

        // 課金処理
        $charge = Subscription::create(array(
            'customer' => $customer->id,
            'plan' => 'plan01', // あらかじめpay.jp側に登録しておいた値。
            'metadata' => [
                'user_id'  => '123',
                'user_name'  => 'あいうえお',
                'email' => 'mail@example.com'
            ]
        ));
        return back();
    }
}