[TIL]10月15日支払モジュール(IMPORT)

14636 ワード
CodeCamp import テキストリンク
出前の民族で注文したり、クーボンで買い物をしたりして、私たちはウェブサイトやアプリケーションで支払います.
決済も以前ほど難しくなく、多くの情報を入力する必要があり、数回クリックするだけで非常に便利に決済できます.
また、NetflixやYouTubeプレミアムを利用した場合の月額固定額決済の定期決済システムもあります.
これらの支払いシステムを構築するにはどうすればいいですか?
PG (PaymentGateway)
ネットで服を購入するとしたら、次のようになります.
  • 購入者が購入した服の情報と金額を売り手
    • に転送する.
  • 販売員はPG会社に受け取った金額
    • を支払うように要求した.
  • PG要求された情報を銀行要求
    • に再送する.
  • 銀行が請求した金額を買い手口座から引き出してPG会社
    • に振り替える
  • PG会社は金額を売り手(固定数量の手数料を含まない)
    • に振り替える
  • 売り手は金額を確認した後、買い手に服
    • を出荷する.
    直接銀行に連絡するのではなく、PG会社を通じて決済を行います.
    PG会社に接続するにはどうすればいいですか?
    代表的なPG社はKG Incisis、KCP、LUG+模倣日環境にKG Movilians、Danal、KakaPayなど多様なPG社が存在する.
    まず、PG会社に直接登録するにはファイルワークプログラムが必要で、ファイルワークプログラムは2週間ほどかかります.
    ファイル作業が通れば、今から開発プログラムに入りますが・・・

    非常に複雑な作業で、決済開発に没頭しても少なくとも2週間はかかります.
    外部支払API i"mport
    i'm portテストを行うには、支払いを要求するimpuid値が必要です.
    i'm port docsには詳細な説明があり、参考にして行うことができます.
    サンプルコード
     <button onclick="requestPay()">결제하기</button>
  ...
  <script>
    function requestPay() {
      // IMP.request_pay(param, callback) 결제창 호출
      IMP.request_pay({ // param
          pg: "html5_inicis",
          pay_method: "card",
          merchant_uid: "ORD20180131-0000011",
          name: "노르웨이 회전 의자",
          amount: 64900,
          buyer_email: "[email protected]",
          buyer_name: "홍길동",
          buyer_tel: "010-4242-4242",
          buyer_addr: "서울특별시 강남구 신사동",
          buyer_postcode: "01181"
      }, function (rsp) { // callback
          if (rsp.success) {
              ...,
              // 결제 성공 시 로직,
              ...
          } else {
              ...,
              // 결제 실패 시 로직,
              ...
          }
      });
    }
  </script>
    clickeventを作成し、上記のサンプルコードを行えばいいです.
    ただし、上記の例はhtmlコードなのでreact環境に適用するために少し変更します.
    import Head from "next/head";
declare const window: typeof globalThis & {
  IMP: any;
};
export default function PaymentPge() {
  function onClickPayment() {
    console.log(123);
    const IMP = window.IMP; // 생략 가능
    IMP.init("imp49910675"); // 예: imp00000000
    // IMP.request_pay(param, callback) 결제창 호출
    IMP.request_pay(
      {
        // param
        pg: "html5_inicis",
        pay_method: "card",
        name: "손목시계",
        amount: 100,
        buyer_email: "[email protected]",
        buyer_name: "홍길동",
        buyer_tel: "010-4242-4242",
        buyer_addr: "서울특별시 강남구 신사동",
        buyer_postcode: "01181",
        // m_redirect_url : '{결제 완료 후 리디렉션 될 URL}'
        // 예: https://www.my-service.com/payments/complete
      },
      function (rsp) {
        // callback
        if (rsp.success) {
          console.log(rsp);
          //mutation() => createPointTransactionOfLoading
          // ...,
          // // 결제 성공 시 로직,
          // ...
        } else {
          // ...,
          // // 결제 실패 시 로직,
          // ...
        }
      }
    );
  }
  return (
    <>
      <Head>
        <script
          type="text/javascript"
          src="https://code.jquery.com/jquery-1.12.4.min.js"
</script>
        <script
          type="text/javascript"
          src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"
</script>
      </Head>
      결제금액 : <input type="text" />
      <br />
      <button onClick={onClickPayment}>결제하기</button>
    </>
  );
}
    scriptでロードする必要があるためnext/headをインポートします.
    i'mport docsのmerchant uid:「ORD 2180131-000001」セクションは、テスト決済のために削除する必要があるため、削除します.
    onClickで支払ボタンにバインドすると、「支払」ウィンドウが表示されます.

    テスト決済は、決済日が12時を超えると自動的にキャンセルされます.また、管理者モードで確認してすぐにキャンセルすることもできます.

    エクスペリエンス管理者コンソールに入ります.
    支払承認履歴をクリックすると履歴が表示されます.
    HTML Day-1
    [Java] ArrayList class