Rails5.2에서 Stripe 사용 (v3)

Rails5.2에서 Stripe 사용 에서 소개하고 있던 API로 경고가 나오게 되어 버렸으므로, 새로운 버젼을 이용하기 위한 간단한 샘플입니다. 공식 문서 "Accept a payment"의 흐름과 거의 같습니다 (Ruby에서만 잘라낸 느낌). 다음과 같은 신용카드 결제 페이지를 사이트에 통합합니다.



전제로, docker-compose로 Rails5.2 개발 환경 에서 소개하고 있는 순서로 rails의 앱이 일어난 상태에서 시작하고 있습니다.

먼저 gem을 추가합니다.

Gemfile

gem 'stripe'

두 개의 액션을 가진 컨트롤러를 만듭니다.

docker-compose exec web rails g controller Pages payment1 payment2

단품 구매에 필요한 구현

지불 버튼을 넣으려는 페이지의 전처리에서 session를 생성합니다. 여기서 상품의 가격 등을 지정할 수 있습니다.

app/controllers/pages_controller.rb

def payment1
  # Set your secret key. Remember to switch to your live secret key in production!
  # See your keys here: https://dashboard.stripe.com/account/apikeys
  Stripe.api_key = Rails.application.credentials.stripe_secret_key

  @session = Stripe::Checkout::Session.create(
    payment_method_types: ['card'],
    line_items: [{
      price_data: {
        currency: 'jpy',
        product_data: {
          name: 'サンプル商品',
        },
        unit_amount: 1980,
      },
      quantity: 1,
    }],
    mode: 'payment',
    success_url: request.base_url + '/pages/payment2?session_id={CHECKOUT_SESSION_ID}',
    cancel_url: request.base_url + '/pages/payment1',
  )
end

Stripe의 API에 액세스하는 개인 키는 직접 코드에 쓰지 않고 rails의 credentials에 저장합니다. 다음 명령은 docker 환경에서 시작하는 경우입니다 (편집기 선택 등을 선호합니다 ...).

docker-compose exec web apt install nano
docker-compose exec -e EDITOR=nano web rails credentials:edit

개인 키를 기재하고 저장합니다. Stripe에 로그인한 상태에서 문서를 읽으면 테스트용 키가 이미 내장된 상태가 되어 있으므로, 그대로 사용합니다. 프로덕션 환경용 키는 대시보드에서 별도로 가져와야 합니다.

stripe_secret_key: sk_test_xxxxxx

지불 버튼의 배치는 이하와 같은 형태. button 태그 자체는 매우 간단하기 때문에, 각각의 사이트에 맞추어 디자인을 조정하는데 편리할 것 같습니다.

app/views/pages/payments1.html.erb

<script src="https://js.stripe.com/v3/"></script>
<button id="checkout-button">Checkout</button>

<script>
  var stripe = Stripe('pk_test_DfoKFBIrAGKhxBbDgP0G954e');
  var checkoutButton = document.getElementById('checkout-button');

  checkoutButton.addEventListener('click', function() {
    stripe.redirectToCheckout({
      // Make the id field from the Checkout Session creation API response
      // available to this file, so you can provide it as argument here
      // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
      sessionId: '<%= @session.id %>'
    }).then(function (result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, display the localized error message to your customer
      // using `result.error.message`.
    });
  });
</script>

/pages/payment1

결제 완료 페이지에는 메시지만 놓여 있습니다.

app/views/pages/payments2.html.erb

<p>Thank you for purchasing!</p>

/pages/payment2

실제로 테스트용 카드 정보를 입력하면 대시보드에 거래 결과가 표시되는지 확인할 수 있습니다(환불 처리 등은 여기에서 가능).

(덤) 구독 신청

마찬가지로 Session 객체에서 구독을 만들 수 있습니다. 신청한 후의 상태 관리가 중요하기 때문에, 실제로는 이와 같이 서브스크립션을 만들지 않는 구현은 되지 않을까 생각합니다만, 매우 간단한 플로우로서는 이것만으로 구현 가능합니다. webhook의 구현 방법 등은 공식 문서을 참조해 주세요.

def subscription1
  Stripe.api_key = Rails.application.credentials.stripe_secret_key

  @session = Stripe::Checkout::Session.create(
    payment_method_types: ['card'],
    line_items: [{
      price_data: {
        currency: 'jpy',
        product_data: {
          name: '月額メンバー',
        },
        unit_amount: 360,
        recurring: {interval: "month"}
      },
      quantity: 1,
    }],
    mode: 'subscription',
    success_url: request.base_url + '/pages/payment2?session_id={CHECKOUT_SESSION_ID}',
    cancel_url: request.base_url + '/pages/subscription1',
  )
end