支払いに便利なPAY.JPをVue.jsからの利用方法

シンプルなAPIと豊富なライブラリで、スムーズに決済を組み込むことができるPAY.JPをVue.jsから利用してみました。

デザイン済みの入力フォーム、オリジナルのデザイン(jQuery)を利用したい場合は公式にサンプルコードが掲載されています。
カード情報のトークン化

Vueから利用

デザイン済みのものは既にコンポーネント化されてるものがgitにありました。
vue-payjp-checkout

オリジナルデザインの場合は自分でコンポーネントを作成する必要があります。
mountedのタイミングで”https://js.pay.jp/”を、
submitのタイミングで”Payjp.setPublicKey(‘pk_test_xxxxxxxxxxxxxxxxxxxxxx’);”がコンポーネント化する際のポイントかと思います。

<script>
export default {
    mounted() {
        const scriptMain = document.createElement('script');
        scriptMain.setAttribute('src','https://js.pay.jp/');
        this.$el.appendChild(scriptMain);
    },
    data() {
        return {
            card: {
                number: 4242424242424242,
                cvc: 213,
                exp_month: 1,
                exp_year: 2019,
            },
        }
    },
    methods: {
        submit: function(event) {
            event.preventDefault();
            Payjp.setPublicKey('pk_test_xxxxxxxxxxxxxxxxxxxxxx');
            Payjp.createToken(this.card, function(s, response) {
                if (response.error) {
                    event.target.find('.payment-errors').text(response.error.message);
                    event.target.find('button').prop('disabled', false);
                }
                else {
                    $('[name="number"]').removeAttr("name");
                    $('[name="cvc"]').removeAttr("name");
                    $('[name="exp_month"]').removeAttr("name");
                    $('[name="exp_year"]').removeAttr("name");

                    var token = response.id;

                    $('#charge-form').after($('<input type="hidden" name="payjp-token">').val(token));
                }
            });
        }
    }
}
</script>
スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD