새로운 UI의 Stripe Checkout을 Rails로 만들어 보았습니다.

전화

Stripe의 옛 디자인인 Stripe의 구현 기사는 많이 있습니다만, 지금 현재의 디자인에서의 도입 기사는 발견되지 않았기 때문에 투고합니다.
Stripe의 체크아웃을 stripe의 문서라든지 stackoverflow나 Qiita를 필사적으로 찾아서 찾아보지 않고, 결과적으로 고객 서포트에 연락을 해 참고 URL을 받았습니다 울음. 자신이 원하는 문서를 찾는 것은 의외로 힘들고, 검색력은 중요하다고 실감.

그런 이렇게 공유해 주신 URL이 이쪽

옛 디자인은 이쪽

현재의 디자인은 이쪽

소개

첫째, 스트라이프 gem 설치

gem install stripe

initializer로 stripe 설정하기

Rails.configuration.stripe = {
  publishable_key: ENV['STRIPE_PUBLISHABLE_KEY'],
  secret_key: ENV['STRIPE_SECRET_KEY']
}
Stripe.api_key = ENV['STRIPE_SECRET_KEY']

참고 기사
htps : // 코 m / 료 / ms / 6 예 8f277471 아 3b02f7b

stripe측으로 천이할 때의 처리를 컨트롤러내에 메소드 작성

def create_checkout
  content_type 'application/json'
  session = Stripe::Checkout::Session.create({
    payment_method_types: ['card'],
    line_items: [{
      price_data: {
        unit_amount: 2000,
        currency: 'usd',
        product_data: {
          name: 'Stubborn Attachments',
          images: ['https://i.imgur.com/EHyR2nP.png'],
        },
      },
      quantity: 1,
    }],
    mode: 'payment',
    success_url: "支払い完了後のURL",
    cancel_url: "支払い失敗時のURL",
  })
  {
    id: session.id
  }.to_json
end

checkout을 호출하는 html 페이지 만들기

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img
          src="https://i.imgur.com/EHyR2nP.png"
          alt="The cover of Stubborn Attachments"
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <button type="button" id="checkout-button">Checkout</button>
    </section>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_51IbbUMJRUSCBZvFMNE3kqdUc75hqKIePTnalyL4PHw1ZA60rwv6wGYmFpsyWfLnG1zQY77LdcZYtOhIOOpNuAEhe00mi7WLG6B");
    var checkoutButton = document.getElementById("checkout-button");
    checkoutButton.addEventListener("click", function () {
      fetch("[作成したメソッドのpath]", {
        method: "POST",
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function (result) {
          // If redirectToCheckout fails due to a browser or network
          // error, you should display the localized error message to your
          // customer using error.message.
          if (result.error) {
            alert(result.error.message);
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
        });
    });
  </script>
</html>

지불 흐름

작성한 HTML 페이지=> 컨트롤러== stripe측의 체크아웃 페이지=> 성공 페이지 or 실패 페이지

흐름으로 결제가 완료됩니다.

　정리

Stripe의 체크 아웃 페이지가 주시나ー라고 생각하고 있는 분은 꼭 실장해 보세요.

Reference

이 문제에 관하여(새로운 UI의 Stripe Checkout을 Rails로 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ZAKILOG1/items/f1d5a7a6626768c5a45e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다