윅스 (Wix) 코딩 예제 - 결제시스템 처리 (Wix Code Tutorial: Processing Payments)

윅스 (Wix) 코딩 예제 - 결제시스템 처리 (Wix Code Tutorial: Processing Payments)

 

 

 

설명)

 

Wix Code Pay API를 사용하면 Wix Stores와 같은 Wix App 컨텍스트 외부에서 사이트 방문자로부터 지불을 수령할 수 있습니다. API를 사용하면 페이지에서 사용자 상호 작용으로 결제할 때 지불금을 받을 수 있습니다.

 

 

경고 :

지불을 시작하기 전에 지불을 수령할 때 발생하는 아래에 설명된 보안 문제를 처리하는 방법을 완전히 이해하는 것이 중요합니다.

 

 

 

전제 조건 (Prerequisites)

Pay API를 사용하기 전에 지불을 허용하도록 사이트를 설정해야합니다. 자세한 내용은 지급 수령 정보를 참조합니다.

 

 

노트 :

지불을 허용하도록 사이트를 설정할 때 제공하려는 지불 방법을 선택하고 지불 통화를 설정합니다.

 

 

또한 백엔드 웹 모듈을 작성하고 페이지 코드에서 정의된 기능을 호출하는 것에 익숙해야합니다. 자세한 내용은 웹 모듈을 사용하여 프론트 엔드에서 서버쪽 코드 호출을 참조합니다.

 

또한 사이트 코드를 보고 호출할 수 있는 사람을 알아두는 것이 좋습니다. 자세한 내용은 Wix 코드로 작업할 때의 보안 고려 사항의 코드 공개 설정 섹션을 참조합니다.

 

 

Pay API

노트 :

Pay API로 작업하려면 사이트를 저장하고 게시해야합니다.

 

 

Pay API는 백엔드와 클라이언트측 함수로 분리되어 아래 설명된대로 안전한 지불 프로세스를 용이하게합니다. 두 가지 기능과 하나의 이벤트로 구성됩니다.

 

- createPayment( ) - 지불을 생성하고 paymentId를 생성하기 위해 백엔드 코드에서 호출됩니다.

- startPayment( ) - 클라이언트측 코드에서 호출되어 현재 사이트 방문자에게 지불 정보를 입력하라는 메시지를 표시합니다.

- onPaymentUpdate( ) - 지불 상태가 변경되면 백엔드 코드에서 시작됩니다.

 

 

Pay API에 대한 자세한 정보는 API Reference의 wix-pay 및 wix-pay-backend를 참조합니다.

 

 

지불 수명주기 (Payment Lifecycle)

다음은 일반적인 지불 수명주기에서 수행된 단계를 요약한 것입니다.

1. 사이트 방문자가 버튼을 클릭하여 지불 프로세스를 시작합니다.

2. 버튼의 이벤트 핸들러가 백엔드 기능을 호출합니다.

3. 지불액과 같은 지불에 대한 정보가 들어있는 PaymentRequest 객체가 백엔드 기능에서 작성됩니다.

4. 백엔드 함수는 PaymentRequest 객체를 사용하여 createPayment( )를 호출하고 호출된 클라이언트측 이벤트 핸들러에 생성된 Payment 객체를 리턴합니다.

5. 이벤트 핸들러는 Payment 객체의 id를 사용하여 startPayment( ) 함수를 호출하여 사이트에서 지불 팝업을 엽니다.

6. 사이트 방문자가 지불 정보를 입력합니다.

7. 이벤트 핸들러는 반환된 PaymentResult를 선택적으로 처리합니다.

8. onPaymentUpdate( ) 이벤트를 사용하여 지불 송금에 대한 추가 상태 갱신을 처리합니다.

 

 

 

 

지불 코드 예제 (Payment Code Example)

다음은 코드의 지불 수명주기를 보여주는 예입니다. 번호가 매겨진 주석은 위에서 설명한 지불 수명주기의 번호가 매겨진 단계에 해당합니다.

 

/********************
 * client-side code *
 ********************/

import {createMyPayment} from 'backend/pay';
import wixPay from 'wix-pay';
import wixWindow from 'wix-window';

// Step 1 - User clicks a button.
export function myButton_click(event) {
  // Step 2 - Call backend function. 
  // (Next, see step 3 in the backend code below.)
  createMyPayment()
    // When the payment has been created and a paymentId has been returned:
    .then( (payment) => {
      // Step 5 - Call the startPayment() function with the paymentId.
      // Include PaymentOptions to customize the payment experience.
      wixPay.startPayment(payment.id, {
          "showThankYouPage": false,
          "termsAndConditionsLink": "https://mysite.com/terms"
      })
      // Step 6 - Visitor enters the payment information.
      // When the payment form is completed:
        .then( (result) => {
          // Step 7 - Handle the payment result.
          // (Next, see step 8 in the backend code below.)
          if (result.status === "Successful") {
            wixWindow.openLightbox("Success Box");
          } else if (result.status === "Pending") {
            wixWindow.openLightbox("Pending Box");
          }
      } );
    } );
}









/**************************
 * backend code - pay.jsw *
 **************************/

import wixPay from 'wix-pay-backend';

export function createMyPayment() {
  // Step 3 - Create payment request.
  // Here we use static data. You might want to use data from a
  // collection. To see an example of such a usage, see the API Reference.
  let paymentRequest = {
    "items": [ 
      {
        name: "Product 1",
        price: 9.99
      },
      {
        name: "Product 2",
        price: 19.99
      }
    ],
    amount: 29.98
  }
  
  // Step 4 - Call createPayment() with the payment request 
  // and return the paymentId.
  // (Next, see step 5 in the client-side code above.)
  return wixPay.createPayment(paymentRequest);
}





/*****************************
 * backend code - events.jsw *
 *****************************/

export function wixPay_onPaymentUpdate(event) {
  // Step 8 - Handle additional status updates using 
  // the onPaymentUpdate() event.
  let paymentId = event.payment.id;
  let newTransactionStatus = event.status;
  let userInfo = event.userInfo;
  
  // Handle new payment status.
}

 

 

 

보안 고려 사항 (Security Considerations)

보안상의 이유로 항상 백엔드 코드에서 PaymentRequest 객체 (위의 3단계)를 작성해야합니다. 클라이언트측 코드에서 지불 정보를 전달하지 않습니다.

클라이언트측 코드에서 지불 정보를 전달하면 쉽게 악용될 수 있는 취약점이 열리게됩니다. 악의적인 사이트 방문자는 브라우저에서 내보낸 백엔드 기능을 호출할 수 있기 때문에 백엔드 코드로 전달되는 지불 정보를 변경할 수 있습니다. 예를 들어, 클라이언트측 코드에서 구매중인 항목의 가격을 전달하면 사용자가 항목 가격을 변경할 수 있습니다.

안전하게 지불을 처리하려면 항상 백엔드에 지불 정보를 정의합니다. 악의적인 사용자가 백엔드 기능을 호출할 수는 있지만 해당 기능에서 발생하는 상황을 보거나 변경할 수는 없습니다. 필요한 경우 백엔드 기능에 추가 검증을 포함할 수도 있습니다.

지불 상태를 기준으로 작업을 수행하려면 항상 백엔드 지불 이벤트에서 받은 상태 업데이트를 사용합니다. 클라이언트쪽 코드에서 받은 상태 정보는 표시 목적으로만 사용해야합니다.

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-processing-payments