영어의 결제 형식은 일본어로 진행하기 어렵다.js로 보세요.

안녕하세요. 저는 2월에 태국에서 귀국해서 Omise Japan에서 엔지니어로 일하고 있습니다.
최근에 나는 Omise의 문서 등 일본을 향한 책이 매우 고통스럽다는 것을 알게 되어 Qiita과시나닷컴 블로그 개인으로 글을 쓰고 싶다.
이번에는 카드 결제에 필요한 카드 토큰화를 담당하는 오미즈다.제이스에 관한 일을 쓰겠습니다.
실제로 지난해 2016년 11월 18일 Omise.js가 업데이트된 거 아세요?
Omise.js 소개
Omise.js는 신용카드 정보의 기호화 기능을 제공했다.
기호화폐는 Omise가 운용하는 신용카드 정보와 간접적으로 교환하는 데 쓰이는 환전권을 말한다.이렇게 되면 Omise를 이용하는 사업자는 신용카드 정보 운용의 번거로움과 비용을 절감하고 신용카드 결제를 가능한 한 빨리 서비스에 포함할 수 있게 된다.
Omise.js를 통해 전송된 신용카드 정보는 사업자의 서버가 거치지 않고 Omise로 직접 전송되는 서버로 처리되기 때문에 글로벌 보안 기준인 PCI DSS Version 3.2의 원래 운용된 매우 높은 보안을 바탕으로 결제할 수 있다.

Omise.js의 3가지 기능
2017년 2월 6일 Omise.크게 다음과 같은 3가지 기능으로 나뉜다.

신용카드 정보의 영패화

독특한 신용카드 표로 영패화Omise.createToken

Card.Pay를 통해 UI와 통화를 전환하는 js의 진화판

그럼 하나씩 소개할게요.
신용카드 정보의 화폐화
Omise.js는 Submit의 시간에 맞춰 Omise 서버에 사용자가 HTML로 입력한 형태의 신용카드 정보를 보내는 기능을 갖추고 있다.
그렇다면 왜 사용자의 서버가 아닌 Omise의 서버에 신용카드 메시지를 보내는 것일까.
위험관리프로그램PCI DSS이라는 안전기준에 맞지 않는 환경에서 신용카드 정보를 사용하지 않는다는 이유에서다.
오피스(Omise·지급제공자)는 신용카드 정보를 운용하는 라이선스(PCI DSS)를 보유한 회사이기 때문에 사용자를 대신해 신용카드 정보를 안전하게 운용할 수 있다.
그래서 Omise.js를 통해 Omise에 보낸 신용카드 데이터를 Omise에 보관하고 영패를 고객기에 건네주면 사용자는 이 영패에 따라 신용카드 결제에 관한 처리를 할 수 있다.
영패는 tokn_test_56wro5rcvo16xrsm795의 형식으로 독특한 값을 지정한다.
자신의 신용카드 형태로 토큰화된 오미즈.createToken
자신의 신용카드 양식을 사용하여 화폐화 메커니즘을 구축할 때 Omise.createToken을 사용하십시오.
omisejs-sample.html

# 日本のリージョンからOmise.jsを読み込む
<script src="https://cdn2.omise.co/omise.js"></script>

# 公開鍵を設定する
<script>
  Omise.setPublicKey("pkey_test_4xpip92xxxxxxxx");
</script>

# Omise.js自体はjQueryを必要としませんが、サンプルで利用するために読み込む
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

# カードフォームのHTML
<form action="/checkout" method="post" id="checkout">
  <div id="token_errors"></div>

  <input type="hidden" name="omise_token">

  <div>
    Name<br>
    <input type="text" data-omise="holder_name">
  </div>
  <div>
    Number<br>
    <input type="text" data-omise="number">
  </div>
  <div>
    Date<br>
    <input type="text" data-omise="expiration_month" size="4"> /
    <input type="text" data-omise="expiration_year" size="8">
  </div>
  <div>
    Security Code<br>
    <input type="text" data-omise="security_code" size="8">
  </div>

  <input type="submit" id="create_token">
</form>

# 上記クレジットカードフォームでトークン化させるための処理を書く
<script>
$("#checkout").submit(function () {

  var form = $(this);

  // Submitボタンを無効化にし、二重クリックを防ぐ
  form.find("input[type=submit]").prop("disabled", true);

  // formの値を変数cardにオブジェクトとして集める
  var card = {
    "name": form.find("[data-omise=holder_name]").val(),
    "number": form.find("[data-omise=number]").val(),
    "expiration_month": form.find("[data-omise=expiration_month]").val(),
    "expiration_year": form.find("[data-omise=expiration_year]").val(),
    "security_code": form.find("[data-omise=security_code]").val()
  };

  // Omiseへトークン作成のリクエストを行う
  Omise.createToken("card", card, function (statusCode, response) {
    if (response.object == "error" || !response.card.security_code_check) {
      // エラーが返ってきた場合のメッセージ
      var message_text = "SET YOUR SECURITY CODE CHECK FAILED MESSAGE";
      if(response.object == "error") {
        message_text = response.message;
      }
      $("#token_errors").html(message_text);

      // Submitボタンを有効化にする
      form.find("input[type=submit]").prop("disabled", false);
    } else {
      // Omiseが返してきたトークンをomise_tokenの値として設定
      form.find("[name=omise_token]").val(response.id);

      // フォームを送信する前に、カード情報を空にする
      form.find("[data-omise=number]").val("");
      form.find("[data-omise=security_code]").val("");

      // トークンを事業者さまのサーバーへ送信
      form.get(0).submit();
    };
  });

  return false;
});
</script>

Card.js의 진화판에 따라Pay의 UI 및 통화 전환
Card.JS를 읽고 Omise에서 카드 형식을 제공합니다.
하지만 카드.js는 태국 내에서 한정된 디자인으로 일본 화폐jpy를 사용할 수 없습니다.
그래서 2016년 11월 18일 Omise.js에 가입하기로 결정했습니다.
힘들지 않고 간단하게 카드 형태를 설치할 때 추천하는 기능이다.
HTML에 아래의 가벼운 애완동물을 기술하면 카드 형식을 표시하는 단추를 표시합니다.
omisejs-sample-pay.html

<form name="checkoutForm" method="POST" action="checkout">
  <input type="hidden" name="description" value="商品合計 10,025円" />
  <script type="text/javascript" src="https://cdn2.omise.co/omise.js.gz"
    data-key="YOUR_PUBLIC_KEY"
    data-image="https://cdn1.www.st-hatena.com/users/ak/akinrt/profile.gif"
    data-frame-label="決済APIとRuby🍣時々Rails[f:id:akinrt:20170206225750p:plain]"
    data-button-label="クレジットカードで支払う"
    data-submit-label="Submit"
    data-location="yes"
    data-locale="ja"
    data-amount="10025"
    data-currency="jpy"
    >
  </script>
</form>

그리고 여기クレジットカードで支払う로 표시되는 단추를 누르면 Omise의 카드 형식이 표시됩니다.

※ クレジットカードで支払う 버튼은 CSS 레이아웃을 변경하십시오.
script에 전달된 매개 변수의 역할은 다음과 같습니다.
param
value
content
data-key
개인 키
사용자의 개인 키를 설정하십시오.
data-image
이미지 링크
카드 형식에 표시되는 축소판 그림의 URL을 설정하십시오.
data-frame-label
타이틀
카드 형식에 표시할 제목을 설정하십시오
data-button-label
버튼 제목
Pay 버튼에 표시할 텍스트를 설정하십시오.
data-submit-label
지불 버튼 레이블
파란색 버튼의 왼쪽에 표시되는 텍스트를 설정하십시오
data-location
"yes"또는 "no"
주소와 연락처를 표시할 때 "yes"를 숨기고 "no"를 숨기십시오
data-locale
"en""ja"또는 "th"
영어, 일본어, 태국어에서 라벨을 지정할 수 있는 언어
data-amount
사용자 지불 금액
사용자에게 지불할 금액을 입력하십시오
data-currency
"thb"또는 "jpy"
사용한 화폐를 지정하십시오
Omise.js의 발신자
Omise.js는 AWS의 S3를 사용하여 싱가포르와 도쿄의 지역에서 발표합니다.
동남아를 대상으로 사용하면 싱가포르 지역의 다음 내용을 사용하세요.
omisejs-singapore

Primary CDN (Singapore)
<script src="https://cdn.omise.co/omise.js.gz"></script>

일본에서 사용하면 도쿄 지역의 다음 내용을 사용하세요.
omisejs-tokyo

Secondary CDN (Japan)
<script src="https://cdn2.omise.co/omise.js.gz"></script>

Card.음...
이것을 사용하지 마세요.
이전부터 사용된 태국 사용자를 대상으로 계속 발표하지만 지금은 유지보수를 하지 않는다.
※ Omise.js만 관리자입니다.
Omise.js의 브라우저 대응 상황은?
Internet Explorer 9 ~ 및 현대 브라우저를 지원합니다.
Omise.js에 포함된 Pay는 React에서 작성하여 ES5methods를 지원하지 않는 브라우저가 제대로 작동하지 않습니다.