##stripe.jsとは

Stripe.js makes it easy to collect credit card (and other similarly sensitive) details without having the information touch your server.
from https://stripe.com/docs/stripe.js

日本語訳:Stripe.jsは、情報がサーバーに触れることなく、簡単にクレジットカード（および他の同様に小文字が区別されます）詳細情報を収集できるようになります。

##使い方(主にstripe.js)
※詳細はURLを参照してください。

###stripe.jsを読み込む

payment.html

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

パブリッシュキーをセット

xxxx.js

Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

Stripe.card.createToken({
    number: $('.card-number').val(),
    cvc: $('.card-cvc').val(),
    exp_month: $('.card-expiry-month').val(),
    exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);

function stripeResponseHandler(status, response) {
    if (response.error) {
        ...
        // show the errors on the form
        $(".payment-errors").text(response.error.message);
    } else {
        var form$ = $("#payment-form");
        // token contains id, last4, and card type
        var token = response['id'];
        // insert the token into the form so it gets submitted to the server
        form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
        // and submit
        form$.get(0).submit();
    }
}

#stripeではなくwebpayを使う設定

xxxx.js

Stripe.endpoint = "https://api.webpay.jp/v1";

上記の設定をする事により、webpayへのリクエストを生成する事ができる。stripeとレスポンスはほぼ同じため同じ様に実装が行える。responseでtokenが取得できるためコレを元にWebPay::Customerを作成する事が可能となる。

xxxx_controller.rb

WebPay.api_key = "test_secret_xxxxxxxxxxxxxxx"
customer = WebPay::Customer.create :card => "tok_XXXXXXXXXXX" , :email => "xxxxxx@xxxxx.com"