Stripe로 Beer Money 받기 - Sans Server

Stripe Payments를 살펴보고 싶었지만 서버를 엉망으로 만들고 싶지 않았습니다. my site 😉의 바닥글에서 작은 맥주 캔으로 결과를 볼 수 있습니다.

작동 방식

Stripe에는 해당 페이지로 리디렉션되는 체크아웃 옵션이 있으며 제품과 결제 양식이 있습니다. 즉, 아무것도 처리할 필요가 없고PCI 기본적으로 올바르게 리디렉션하면 됩니다. 리디렉션을 처리하는 라이브러리도 있으므로 상당히 쉽습니다.

클릭했을 때 Stripe Javascript 라이브러리를 호출하는 버튼을 배치해야 합니다. 나는 맥주 돈을 "판매"하고 있기 때문에 내 사이트 바닥글에 작은 맥주 캔을 넣었습니다.

사이트에 추가

나는 Stripe에서 this guide을 따랐다. Stripe Docs를 탐색하면서 찾기가 조금 어려웠지만 검색Stripe Checkout without server을 통해 찾을 수 있었습니다.

가이드를 반복하지는 않겠지만 기본적으로 Stripe 대시보드를 사용하여 가격이 있는 제품을 만듭니다. 그러면 해당 가격에 필요한 ID가 부여됩니다. 대시보드는 또한 가격 ID와 API ID가 채워진 코드 스니펫을 생성합니다. 제가 편집한 스니펫은 아래와 같습니다.

또한 성공 및 취소 URL이 예상된다는 것을 알 수 있습니다. 각각 성공과 어 오라고 말하는 두 페이지를 추가했습니다.

<script src="https://js.stripe.com/v3"></script>
<script>
  (function () {
    var DOMAIN = 'https://www.joshkasuboski.com/';
    var key = '<pk_livekey>';
    var price = '<price_key>';
    var stripe = Stripe(key);

    var checkoutButton = document.getElementById('checkout-button-beermoney');
    checkoutButton.addEventListener('click', function () {
      // When the customer clicks on the button, redirect
      // them to Checkout.
      stripe.redirectToCheckout({
        lineItems: [{ price: price, quantity: 1 }],
        mode: 'payment',
        // Do not rely on the redirect to the successUrl for fulfilling
        // purchases, customers may not always reach the success_url after
        // a successful payment.
        // Instead use one of the strategies described in
        // https://stripe.com/docs/payments/checkout/fulfillment
        successUrl: DOMAIN + 'success',
        cancelUrl: DOMAIN + 'canceled',
      })
        .then(function (result) {
          if (result.error) {
            // If `redirectToCheckout` fails due to a browser or network
            // error, display the localized error message to your customer.
            var displayError = document.getElementById('error-message');
            displayError.textContent = result.error.message;
          }
        });
    });
  })();
</script>

그 스 니펫과 버튼이 내가 필요한 전부였습니다. Stripe은 또한 가격과 API 모두에 대한 테스트 키를 제공합니다. 따라서 먼저 테스트하여 작동하는지 확인할 수 있습니다.

설정한 후 맥주 캔을 클릭하면 아래와 같은 페이지가 표시됩니다.



💰💰💰 이익 💰💰💰

기타 사례

이것은 누군가가 한 번에 하나의 항목만 구매하는 경우 꽤 잘 작동합니다. 사용자가 원하는 항목을 추적한 다음 사용자가 클릭하면checkout Stripe Redirect에서 여러 항목lineItems을 보내면서 프런트엔드에서 완전히 장바구니를 만들 수 있습니다.

이것은 실제 상점에는 충분하지 않을 수 있지만 완전한 클라이언트 측 상점을 갖는 것은 매우 편리합니다.