vue.js laravel で pay.jp クレジットカード決済

すでにライブラリがあるが・・・
https://github.com/ngs/vue-payjp-checkout

なんかごちゃごちゃしてて使いづらいので、手動で書く。

管理画面から、
webhook 、 test のままじゃな動かないので、 live に切り替えないと。
これ忘れると月額課金が動かなくなりクレームの嵐になるので注意すること。


# まずはcomposer。

```

composer require payjp/payjp-php

```

# 流れ

・pay.jp にクレジットカード決済情報をおくる
・tokenが完成
・そのtokenを元に単発決済をしよう


onTokenCreatedの中身を削除すりゃコピペで動く。



```Payjp.vue

<template>

    <div>
        <h2>テストカード</h2>
        <p>
            4242424242424242
        </p>
        <div ref="payjpArea"></div>
    </div>

</template>

<script>

    export default {
        created () {

        },
        mounted() {

            // HTML描画を待って要素をappendしたい
            this.appendPayJpScriptTag();

            // appendPayJpScriptTagでscriptタグをappendとpayjpのscript実行後に処理したい
            window.onTokenCreated = this.onTokenCreated;
            window.onTokenFailed = this.onTokenFailed;

        },

        beforeDestroy () {
            const payjpCheckoutIframeEl = document.getElementById('payjp-checkout-iframe');
            payjpCheckoutIframeEl.parentElement.remove();
            this.$refs.payjpArea.removeChild(this.scriptEl);
            window.PayjpCheckout = null;
            window.onTokenCreated = null;
            window.onTokenFailed = null;
        },
        methods: {

            appendPayJpScriptTag () {
                const attrs = {

                    //API公開鍵 情報を入力
                    'data-key': 'pk_test_youryouryour',


                    'id': 'payjp-script',
                    'src': 'https://checkout.pay.jp/',
                    'class': 'payjp-button',
                    'data-partial': true,//入力後にtokenを作成し、windowを閉じる
                    'data-text': 'カード情報を入力する',
                    'data-submit-text': '支払い',
                    'data-lang': 'ja',
                    'data-on-created': 'onTokenCreated',
                    'data-on-failed': 'onTokenFailed',
                    'data-name-placeholder': 'TEST TARO'
                };
                this.scriptEl = document.createElement('script');
                _.forEach(attrs, (v, k) => {
                    this.scriptEl.setAttribute(k, v)
                });
                this.$refs.payjpArea.appendChild(this.scriptEl);
            },
            onTokenCreated () {
                let token = document.getElementsByName('payjp-token')[0].value;

                let dataform = new FormData();

                //undefinedならテキストで undefined のまま送信
                dataform.append('id',this.$root.user.id);
                dataform.append('token',token);

                axios.post('/payjp/tudokakin/', dataform).then(e => {
                    console.log("成功");
                }).catch((error) => {
                    console.log("エラー");
                });

            },
            onTokenFailed (res) {
                // 処理
            }
        }
    }
</script>


```

上記で token　が完成した。
ということで、サーバーに送ろう

```PayjpContorller.php

    public function tudokakin(Request $request)
    {
//        API情報を読み出す
        $pay_jp_secret = config('app.pay_jp_secret');
        $pay_jp_key = config('app.pay_jp_key');

        //顧客化
        \Payjp\Payjp::setApiKey($pay_jp_secret);
        $customer = \Payjp\Customer::create(array(
            "card" => $request->token
        ));

//        顧客情報を元に支払い
        \Payjp\Payjp::setApiKey($pay_jp_secret);

        try {
            $res = \Payjp\Charge::create(
                [
                    "customer" => $customer->id,
                    "amount" => mt_rand(1000,5000),//支払額。テストなのでランダムにしとく。
                    "currency" => 'jpy'
                ]
            );

            if (isset($res['error'])) {
                throw new Exception();
            }

        } catch (Exception $e) {
            // カードが拒否された場合
            $res['error']['message'];
            exit;
        }


        return response()->json(['res'=> $res]);


    }

```

これで単発決済が完了している。
あとは、ユーザーに何度もカード番号を入力させなくても良いように、
カスタマーIDをDBに保存するなりしておく。