2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Omise.js で支払額を動的に変更する方法

Last updated at Posted at 2018-08-31

image.png

はじめに

カード決済をする際、カード番号を取り扱うため、一般的に以下のようなプロトコルが使われている

image.png

前回サーバーサイドでOmiseのAPIを使う話をした時、クレジットカード情報を受け渡すときはクライアントサイドから行ったほうが良いという話をした。今回はクライアントサイドのトークン送受信の部分を実装してみた。

クライアントサイドを実装するにはOmise.jsを使うかOmise のjavascriptクライアントを使うかの2通りの方法がある。javascript クライアントを使う場合はクレジットカードを入力するフォームを一から作らないといけないが、自由にカスタマイズできる。Omise.jsを使う場合はカスタマイズがやや難しいこともあるが、あまりこだわらなければ簡単に使うことができる。今回はOmise.jsをVue.jsで実装してみたが、値段の変更をダイナミックに行えるようにした。

コード

まず omise.js を使えるように omise.js の cdn を script タグで囲みます。順番としては omise.js を使っている入ってる main.js の前に書く。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuex shopping cart example</title>
  </head>
  <body>
    <script src="https://cdn.omise.co/omise.js"></script>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

omise.js は以下のように使う。

<template>
  <div class="cart">
    <h2>Your Cart</h2>
    <p v-show="!products.length"><i>Please add some products to cart.</i></p>
    <ul>
      <li v-for="product in products">
        {{ product.title }} - {{ "¥" + product.price  }} x {{ product.quantity }}
      </li>
    </ul>
    <p>Total: {{ "¥" + total }}</p>

    <p><button :disabled="!products.length" @click.prevent="checkout(total)">Checkout</button></p>

    <form action="https://postman-echo.com/post" id="my-custom-checkout-form" method="POST">
      <input type="hidden" :value="total" name="total">
      <input type="hidden" value="" name="omiseToken">
      <input v-for="product in products" type="hidden" :value="product.quantity" :name="product.id">
    </form>
    <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex"

export default {
  computed: {
    ...mapState({
      checkoutStatus: state => state.cart.checkoutStatus
    }),
    ...mapGetters("cart", {
      products: "cartProducts",
      total: "cartTotalPrice"
    })
  },
  methods: {
    checkout(total) {
      OmiseCard.open({
        frameLabel: "Merchant",
        submitLabel: "PAY RIGHT NOW !",
        amount: total
      })
    }
  },

  mounted() {
    OmiseCard.configure({
      publicKey: "pkey_test_???", // 公開鍵。ダッシュボードから取得できます
      image: "https://cdn.omise.co/assets/dashboard/images/omise-logo.png", 
      currency: "JPY",
      onCreateTokenSuccess: token => {
        const form = document.querySelector("#my-custom-checkout-form")
        form.omiseToken.value = token;
        form.submit()
      }
    })
    OmiseCard.attach()
  }
}
</script>

解説

  1. トークンを送るフォームの作成。ここではテスト用に https://postman-echo.com/post を使っているが本来はマーチャントのサーバーがここに来る

    ```html
        <form action="https://postman-echo.com/post" id="my-custom-checkout-form" method="POST">
          <input type="hidden" :value="total" name="total">
          <input type="hidden" value="" name="omiseToken">
          <input v-for="product in products" type="hidden" :value="product.quantity" :name="product.id">
        </form>
    ```
    
  2. トークンを取得したら呼び出すコールバックの作成。カード情報等が間違っていなければ次に呼び出される。ここでは 1で作成したフォームをサブミットするようにしている。こちらはページが最初にロードされたときにのみ実行される

    ```javascript
      mounted() {
        OmiseCard.configure({
          publicKey: "pkey_test_???", // 公開鍵。ダッシュボードから取得できます
          image: "https://cdn.omise.co/assets/dashboard/images/omise-logo.png", 
          currency: "JPY",
          onCreateTokenSuccess: token => {
            const form = document.querySelector("#my-custom-checkout-form")
            form.omiseToken.value = token;
            form.submit()
          }
        })
        OmiseCard.attach()
      }
    ```
    
  3. omise.jsのカード情報入力するためのフォームを呼び出す関数。こちらは値段 (amount) が渡されるパラメータによって動的に変わるようになっている。

    methods: {
        checkout(total) {
          OmiseCard.open({
            frameLabel: "Merchant",
            submitLabel: "PAY RIGHT NOW !",
            amount: total
          })
        }
    

レポジトリ

マーチャントと言えばヴェニスの商人。
merchant of venice

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?