윅스 (Wix) 코딩 예제 - Wix Pay API를 사용한 단일 제품 결제시스템 만들기 (Wix Code Tutorial: Using the Wix Pay API to Collect Payments for a Single Product)

윅스 (Wix) 코딩 예제 - Wix Pay API를 사용한 단일 제품 결제시스템 만들기 (Wix Code Tutorial: Using the Wix Pay API to Collect Payments for a Single Product)

 

 

 

설명)

 

이 글에서는 Wix Code Pay API를 사용하여 Wix App (Wix Stores와 같은)의 컨텍스트 외부에서 미리 정의된 단일 제품에 대한 사이트 방문자의 지불금을 수령하는 방법에 대해 설명합니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 에디터에서 사이트를 열어 템플릿 작업을 할 수 있습니다. 샘플 사이트를 설정하고 작동시키기 위해 추가한 코드를 설명합니다.

 

 

 

 

 

노트 :

컬렉션에 저장된 제품에 Wix Pay API를 사용하는 방법을 배우려면 Wix 코드 : Wix Pay API를 사용하여 데이터베이스 컬렉션의 제품에 대한 지불을 봅니다.

 

 

 

개요 (Overview)

사이트에서 다음을 추가합니다 (In our site we added the following) :

- 판매용 단일 제품을 표시하는 Pay API 페이지의 텍스트 요소 및 이미지.

- 방문자가 클릭하여 제품을 구입할 수 있는 Pay API 페이지의 "Buy Now" 버튼.

 

 

그런 다음 코드를 추가하여 다음 작업을 수행합니다 (Then we added code to do the following) :

1. 방문자가 "Buy Now"버튼을 클릭하면 버튼 이벤트 핸들러가 백엔드 기능을 호출합니다.

2. 백엔드 기능은 지불 객체를 작성하여 클라이언트 측에 리턴합니다. 지불 객체에는 백엔드 코드에 정의된대로 제품에 대한 지불 정보가 들어있습니다.

3. 클라이언트 측에서는 지불 객체의 ID를 사용하여 지불 절차가 시작되어 지불 창이 나타납니다.

4. 방문자가 지불 정보를 입력하고 거래를 완료합니다.

 

 

 

시작하기 전에 (Before You Start)

코드로 Wix 지불 작업을 시작하기 전에 다음을 수행합니다.

- 코드로 지불하는 데 필요한 보안 예방 조치를 이해합니다. 특히 백엔드에서 결제 정보를 항상 정의해야합니다. 이렇게하면 악의적인 사용자가 지불 정보나 지불 프로세스에 액세스하여 조작할 수 없게됩니다.

- 사이트에 허용된 지불 방법을 설정합니다. 계속 진행하기 전에 일반적인 지불 절차를 이해하는 것이 좋습니다.

 

 

1 단계 : 유료 API 페이지 설정하기 (Step 1: Set up the Pay API Page)

Pay API 페이지에서 다음을 추가했습니다.

- 판매용 로봇의 이미지.

- 로봇의 이름, 가격 및 설명에 대한 텍스트 요소.

- Buy Now 버튼은 지불 프로세스를 시작합니다. 버튼의 속성 패널에서 onClick 이벤트 핸들러를 추가했습니다.

 

 

 

 

2 단계 : 백엔드에서 createPaymentForProduct 함수 만들기 (Step 2: Create the createPaymentForProduct Function in the Backend)

BE_PayAPI.jsw라는 백엔드 모듈을 만들었습니다. 그런 다음 지불을 위해 필요한 모듈을 백엔드 코드로 가져왔습니다.

그런 다음 우리는 지불 객체를 생성하고 반환하는 createPaymentForProduct 함수를 선언했습니다. 또한 클라이언트 측에서 사용할 수 있도록 함수를 내보냅니다.

금액은 모든 항목에 대한 가격 속성의 합계입니다. 이 예에서는 금액과 가격이 동일하므로 항목이 하나뿐입니다.

 

import wixPay from 'wix-pay-backend';

export function createPaymentForProduct() {
  return wixPay.createPayment( {
    amount: 0.50,
    items: [{name: 'DIY Robot', price: 0.50}],
  } );
}

 

 

코드 이해하기 (Understanding the Code)

1행 : Wix Pay Backend 라이브러리로 작업하는 데 필요한 모듈을 가져옵니다.

3행 : 클라이언트 측에서 사용할 수 있도록 createPaymentForProduct 함수를 선언하고 내보냅니다. 이 함수에서 다음을 수행합니다.

4행 : wix-backend-pay createPayment 함수의 결과를 리턴합니다.이 함수는 PaymentRequest를 사용하여 새 지불 객체를 작성합니다.

5-6행 : PaymentRequest (제품 지불 정보)를 코드에 직접 정의합니다.

 

 

 

사이트의 요소에 따라 변경해야 할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)

이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야 할 수 있습니다.

- 0.50 (금액)

- DIY 로봇 (이름)

- 0.50 (가격)

 

 

3 단계 : 유료 API 페이지 준비하기 (Step 3: Prepare the Pay API Page)

Pay API 페이지에서 우리는 코드로 작업하는데 필요한 모듈을 가져오기 시작합니다. 또한 백엔드에서 createPaymentForProduct 함수를 가져옵니다.

 

import wixPay from 'wix-pay';
import {createPaymentForProduct} from 'backend/BE_PayAPI';

 

 

코드 이해하기 (Understanding the Code)

1행 : Wix Pay 라이브러리로 작업하는 데 필요한 모듈을 가져옵니다.

2행 : 생성 된 백엔드 모듈에서 createPaymentForProduct 함수를 가져옵니다 (2 단계 참조). 이 기능은 백엔드에서 정의된 단일 제품에 대한 지불 정보를 기반으로 지불 객체를 작성합니다.

 

 

사이트에서 이 코드를 작동시키려면 여기에서 변경해야할 식별자가 없습니다.

 

 

 

 

4 단계 : Pay API 페이지에서 button1_click 함수 만들기 (Step 4: Create the button1_click function on the Pay API Page)

button1_click 이벤트 핸들러는 방문자가 Buy Now 버튼을 클릭하면 실행됩니다. 이벤트 핸들러는 제품 지불 정보를 기반으로 지불 객체를 리턴하는 백엔드 코드를 호출합니다.

그런 다음 이벤트 핸들러는 백엔드에서 리턴된 지불 객체로 Wix Pay startPayment 함수를 실행합니다. 그러면 지불 창이 열리고 사용자에게 지불 방법을 선택하고 지불 프로세스를 계속하도록 프롬프트합니다.

 

이 예에서는 지불에 사용할 수 있는 지불 옵션 중 하나인 termsAndConditionsLink를 포함시켰습니다.

 

export function button1_click(event) {
 createPaymentForProduct().then(payment => {
   wixPay.startPayment(payment.id, {"termsAndConditionsLink": "https://www.wix.com/"});
 });
}

 

 

코드 이해하기 (Understanding the Code)

1행 : "Buy Now"버튼을 클릭하면 다음을 수행하는 이벤트 핸들러를 실행합니다.

2행 : 백엔드에서 가져온 createPaymentForProduct 함수를 실행합니다. 반송된 지불 객체로 다음을 수행합니다.

3행 : Wix Pay startPayment 함수를 지불 객체의 ID와 함께 실행합니다. 결제 창이 열리고 사용자에게 지불 정보를 묻습니다.

startPayment 함수는 옵션인 termsAndConditionsLinkPaymentOption으로 실행됩니다. 이용 약관 페이지에 대한 링크가 있는 확인란은 지불 창에 포함되어 있습니다.

 

 

사이트에서 이 코드를 작동시키려면 여기에서 변경해야할 식별자가 없습니다.

 

지불 창에서 사이트 방문자가 지불 방법을 선택하고 지불 정보를 채우고 Pay Now을 클릭하면 송금이 완료됩니다. 방문자는 지불을 확인하는 이메일을 받습니다.

 

 

다음 단계 (Next Steps)

- 템플릿에서 작업하려면 에디터에서 이 예제를 엽니다.

- 사이트를 게시합니다.

- 자세히 알아보기 :

a. 윅스 코드(Wix Code) : Wix Pay API를 사용하여 데이터베이스 컬렉션의 제품에 대한 지불

b. 윅스 코드(Wix Code) 예제 : 지불 처리

c. wix-pay API

d. wix-pay-backend API

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-using-the-wix-pay-api-to-collect-payments-for-a-single-product