Flutterwave 통합: HTML 체크아웃으로 기부 페이지 만들기

이 가이드에서는 Flutterwave HTML 체크아웃을 사용하여 결제를 수락하는 방법을 배웁니다.

이 방법은 익명 지불에 탁월합니다. 사람들은 이메일 *또는 *이름과 같은 세부 정보를 공개하지 않고 비용을 지불합니다.

다음은 샘플 Flutterwave HTML 체크아웃 코드입니다.

<form method="POST" action="https://checkout.flutterwave.com/v3/hosted/pay">
    <input type="hidden" name="public_key" value="FLWPUBK_TEST-SANDBOXDEMOKEY-X" />
    <input type="hidden" name="customer[email]" value="[email protected]" />
    <input type="hidden" name="customer[phone_number]" value="0900192039940" />
    <input type="hidden" name="customer[name]" value="Jesse Pinkman" />
    <input type="hidden" name="tx_ref" value="bitethtx-019203" />
    <input type="hidden" name="amount" value="1000" />
    <input type="hidden" name="currency" value="NGN" />
    <input type="hidden" name="redirect_url" value="https://demoredirect.localhost.me/" />

    <button type="submit">CHECKOUT</button> 
</form>

public_key

이름이 public_key인 입력 값은 Flutterwave 공개 키를 입력하는 위치입니다.

<input type="hidden" name="public_key" value="PUBLIC_KEY_HERE" />

txt_ref

txt_ref는 각 트랜잭션에 부여된 고유한 참조입니다. 항상 각 트랜잭션에 대해 고유한 참조를 생성할 수 있습니다.

<input type="hidden" name="tx_ref" value="UNIQUE_REF" />

기부 페이지를 만들어 봅시다

기부 페이지를 구현하려고 합니다. 관심 있는 사람은 금액을 입력하고 기부를 클릭하기만 하면 됩니다. 이 경우 개인 정보는 필요하지 않습니다.

실용화합시다.

두 개의 HTML 페이지를 만듭니다.

book.html
success.html

book.html에는 실제 책 페이지가 포함됩니다. 그리고 누구나 기부할 수 있도록 버튼이 표시됩니다.
success.html는 누군가 성공적으로 결제하면 감사 페이지를 표시합니다.

코드 붙여넣기

다음 코드를 복사하여 book.html 안에 붙여넣습니다.

<div class="wrapper">
  <div class="photo">
    <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9uYXRpb258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=400&q=80" alt="" />
    <div class="info">
      <h2>Save a child campaign</h2>
      <form method="POST" action="https://checkout.flutterwave.com/v3/hosted/pay">
        <input type="hidden" name="public_key" value="YOUR PUBLIC KEY" />
        <input type="hidden" name="tx_ref" value="save-a-child-donation" />
        <input type="hidden" name="customer[email]" value="[email protected]" />
        <input type="text" name="amount" placeholder="Amount" />
        <input type="hidden" name="currency" value="NGN" />
        <input type="hidden" name="redirect_url" value="http://example.com/success.html" />
        <button type="submit">Donate Now</button>
      </form>
    </div>
  </div>
</div>

그러면 위의 이전 이미지와 같이 기부 페이지가 표시됩니다.

이제 이것을 success.html에 추가하십시오.

<div class="wrapper">
    <div class="photo">
    <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9uYXRpb258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=400&q=80" alt="" />
    <div class="info">
        <h2>Thank you for your Donation.</h2>
    </div>
    </div>
</div>

이제 기부 페이지를 테스트하고 확인할 수 있습니다.

금액을 입력하고 기부를 누르면 Flutterwave 결제 체크아웃으로 이동합니다.



결제하면 success.html로 다시 리디렉션됩니다.

결론

축하합니다. 방금 HTML Checkout을 사용하여 Flutterwave를 통합하는 방법을 보았습니다.