새로운 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.)
첫째, 스트라이프 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.)
Reference
이 문제에 관하여(새로운 UI의 Stripe Checkout을 Rails로 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ZAKILOG1/items/f1d5a7a6626768c5a45e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)