윅스 (Wix) 코딩 예제 - Wix Pay API를 사용한 데이터베이스 컬렉션의 제품들에 대한 결제시스템 만들기 (Wix Code Tutorial: Using the Wix Pay API to Collect Payments for Products in a Database Collection)
설명)
이 글에서는 Wix Code Pay API를 사용하여 Wix App (Wix Stores와 같은)의 컨텍스트 외부에서 데이터베이스 컬렉션에 저장된 제품에 대한 사이트 방문객으로부터 지불금을 수령하는 방법에 대해 설명합니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 에디터에서 사이트를 열어 템플릿 작업을 할 수 있습니다. 샘플 사이트를 설정하고 작동시키기 위해 추가한 코드를 설명합니다.
노트 :
사전 정의된 단일 제품에 Wix Pay API를 사용하는 방법을 배우려면 Wix 코드 : Wix Pay API를 사용하여 단일 제품에 대한 지불 을 참고합니다.
개요 (Overview)
사이트에서 다음을 추가했습니다 (In our site we added the following) :
- 판매할 제품 목록이 있는 제품 컬렉션. 각 제품에는 제목, 이미지 및 가격이 필요합니다.
- 컬렉션 및 반복 레이아웃 페이지. 반복 레이아웃은 Products 컬렉션의 제품을 표시합니다. 반복 레이아웃의 각 제품에는 방문자가 클릭하여 제품을 구입할 수 있는 Buy Now 버튼이 있습니다.
그런 다음 코드를 추가하여 다음 작업을 수행했습니다. (Then we added code to do the following) :
1. 방문자가 Buy Now 버튼을 클릭하면 버튼의 이벤트 핸들러가 백엔드 기능을 호출합니다.
2. 백엔드 기능은 Products 컬렉션에서 제품 지불 정보를 검색하고 클라이언트 측에 지불 객체를 작성하여 리턴합니다.
3. 클라이언트 측에서는 지불 객체의 ID를 사용하여 지불 절차가 시작되어 지불 창이 나타납니다.
4. 방문자가 지불 정보를 입력하고 거래를 완료합니다.
시작하기 전에 (Before You Start)
코드로 Wix 지불 작업을 시작하기 전에 다음을 수행합니다.
- 코드로 지불하는 데 필요한 보안 예방 조치를 이해합니다. 특히 다음 사항을 확인합니다.
a. 항상 백엔드에서 지불 정보를 정의합니다.
b. 데이터베이스에 저장된 지불 정보를 보호하는 수집 권한을 할당합니다. 사이트 관리자만 컨텐츠를 작성, 갱신 및 삭제할 수 있는지 확인합니다.
- 사이트에 허용된 지불 방법을 설정합니다. 계속 진행하기 전에 일반적인 지불 절차를 이해하는 것이 좋습니다.
1단계 : 사이트 설정하기 (Step 1: Set up the Site)
이 예제에서는 컬렉션에 저장된 판매용 제품이 필요할 것입니다. 사이트에 Wix Stores를 추가했습니다. 이 사이트는 Stores/Products 컬렉션을 자동으로 추가하지만, Wix Stores 없이도 자신의 제품 컬렉션을 만들 수 있습니다.
노트 :
사이트 구조 사이드바의 데이터베이스 섹션에서 Stores 컬렉션을 보려면 사이트를 저장하거나 게시하고 브라우저를 새로 고침해야할 수 있습니다.
다음은 Products 컬렉션에 있는 일부 데이터의 모습입니다.
또한 제품을 표시하기 위해 사이트에 Collection & Repeater 페이지를 추가했으며 결제 정보와 관련된 코드를 안전하게 실행하기 위해 BE_Collection.jsw 백엔드 모듈을 만들었습니다.
2단계 : 컬렉션 및 리피터(Collection & Repeater) 페이지 설정하기 (Step 2: Set up the Collection & Repeater Page)
컬렉션 및 리피터(Collection & Repeater) 페이지에 다음을 추가했습니다.
- 제품을 표시할 반복 레이아웃.
- 판매를 위해 각 제품의 이름, 가격 및 그림을 표시하는 반복 레이아웃의 텍스트 및 이미지 요소.
- 반복 레이아웃의 Buy Now 버튼을 클릭하면 선택한 제품에 대한 지불 프로세스가 시작되는 트리거.
- 컬렉션의 데이터를 반복 레이아웃에 연결하기 위해 Stores/Products 컬렉션에 연결된 데이터세트.
노트 :
반복 레이아웃에 컬렉션의 데이터를 표시하려면 먼저 반복 레이아웃를 데이터세트에 연결한 다음 반복 레이아웃의 각 요소를 데이터세트에 연결해야합니다.
- 반복 레이아웃의 속성 패널에서 반복 레이아웃를 로드할 준비가 되었을 때 실행될 onItemReady 이벤트 핸들러를 추가했습니다.
- Buy Now 버튼의 속성 패널에서 버튼을 클릭할 때 실행되는 onClick 이벤트 핸들러를 추가했습니다.
3단계 : 백엔드에서 createPaymentForProduct 함수 만들기 (Step 3: Create the createPaymentForProduct Function in the Backend)
우리는 BE_Collection.jsw라는 백엔드 모듈을 만들었습니다. 백엔드에서는 백엔드 지불 및 데이터로 작업해야하는 모듈을 코드로 가져오기 시작합니다. 그런 다음 createPaymentForProduct 함수를 작성하여 컬렉션에서 제품 데이터를 검색하고 데이터를 기반으로 지불 객체를 작성하여 리턴합니다. 또한 클라이언트 측에서 사용할 수 있도록 함수를 내보냅니다.
금액은 모든 항목에 대한 가격 속성의 합계입니다. 이 예에서는 금액과 가격이 동일하므로 항목이 하나뿐입니다.
노트 :
이 예제에서는 async/await 자바스크립트(JavaScript) 기능을 사용합니다.
import wixPay from 'wix-pay-backend';
import wixData from 'wix-data';
export async function createPaymentForProduct(productId) {
let product = await wixData.get('Stores/Products', productId);
return wixPay.createPayment( {
amount: product.discountedPrice,
items: [
{ name: product.name, price: product.discountedPrice }
]
} );
}
코드 이해하기 (Understanding the Code)
1행 : Wix Pay Backend 라이브러리로 작업하는 데 필요한 모듈을 가져옵니다.
2행 : Wix Data 라이브러리로 작업하는 데 필요한 모듈을 가져옵니다.
4행 : 클라이언트 쪽에서 사용할 수 있도록 createPaymentForProduct 함수를 선언하고 내보냅니다. 이 함수에서 다음을 수행합니다.
5행 : Wix Data get 함수를 사용하여 컬렉션에서 제품 정보를 검색하고 이를 제품 변수에 지정합니다. get 함수는 방문객이 선택한 제품의 ID를 사용하여 검색할 제품 데이터를 "알 수(know)" 있습니다.
6행 : wix-backend-pay createPayment 함수의 결과를 리턴합니다.이 함수는 PaymentRequest를 취하여 새 지불 객체를 작성합니다.
7-9행 : productvariable에 저장된 지불 정보를 사용하여 PaymentRequest를 정의합니다.
사이트의 요소에 따라 변경해야 할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 이 항목을 사이트의 일치 조건과 일치하도록 수정해야 할 수 있습니다.
- Stores/Products
4단계 : 컬렉션 및 리피터(Collection & Repeater) 페이지 준비하기 (Step 4: Prepare the Collection & Repeater Page)
컬렉션 및 리피터(Collection & Repeater) 페이지에서 우리는 코드로 작업하는 데 필요한 모듈을 코드로 가져오기 시작합니다. 또한 백엔드에서 createPaymentForProduct 함수를 가져옵니다.
import wixPay from 'wix-pay';
import {createPaymentForProduct} from 'backend/BE_Collection';
코드 이해하기 (Understanding the Code)
1행 : Wix Pay 라이브러리로 작업하는 데 필요한 모듈을 가져옵니다.
2행 : 생성된 백엔드 모듈에서 createPaymentForProduct 함수를 가져옵니다 (3 단계 참조). 이 함수는 Products 컬렉션에 저장된 제품에 대한 지불 정보를 기반으로 지불 객체를 생성합니다.
사이트에서 이 코드를 작동 시키려면 여기에서 변경해야 할 식별자가 없습니다.
5단계 : 컬렉션 및 리피터(Collection & Repeater) 페이지에서 repeater1_itemReady 함수 만들기
repeater 1_itemReady 이벤트 핸들러는 repeater가 로드될 준비가 되면 실행됩니다.
이 함수는 컬렉션의 각 항목(제품)에 대해 실행됩니다. 현재 항목은 itemData 매개 변수로 이벤트 핸들러에 전달됩니다.
먼저 함수는 항목을 반복 레이아웃에 로드하여 제품 정보를 표시합니다. 그런 다음 사용자가 이 특정 항목에 대해 Buy Now 버튼을 클릭했는지 확인합니다.
이 항목에 대한 버튼을 클릭하면 onClick 이벤트 핸들러는 선택한 제품에 대한 지불 객체를 작성하는 백엔드 createPaymentForProduct 함수를 실행합니다.
그런 다음 이벤트 핸들러는 백엔드에서 리턴된 지불 객체로 Wix Pay startPayment기능을 실행합니다. 그러면 지불 창이 열리고 사용자에게 지불 방법을 선택하고 지불 프로세스를 계속하도록 프롬프트합니다.
이 예제에서는 사용 가능한 지불 옵션 중 하나인 termsAndConditionsLink도 포함시켰습니다.
export function repeater1_itemReady($item, itemData, index) {
let itemId = itemData._id;
$item('#button1').onClick(async () => {
let payment = await createPaymentForProduct(itemId);
await wixPay.startPayment((payment.id), { "termsAndConditionsLink": "https://www.wix.com/" });
});
}
코드 이해하기 (Understanding the Code)
1행 : Stores/Products 데이터세트의 각 항목(제품)에 대해 반복 레이아웃에서 항목을 설정한 후 다음을 수행합니다.
2행 : itemID 변수에 항목의 ID를 저장합니다.
3행 : 이 항목에 대해 "Buy Now"버튼을 클릭하면 다음을 수행하는 이벤트 핸들러를 실행합니다.
4행 : 선택한 제품의 ID로 백엔드에서 가져온 createPaymentForProduct 함수를 실행합니다. paymentvariable에 리턴된 지불 객체를 저장합니다.
5행 : Wix Pay startPayment 함수를 지불 객체의 ID와 함께 실행합니다. 결제 창이 열리고 사용자에게 지불 정보를 묻습니다.
startPayment 함수는 옵션인 termsAndConditionsLinkPaymentOption으로 실행됩니다. 이용 약관 페이지에 대한 링크가 있는 확인란은 지불 창에 포함되어 있습니다.
사이트의 요소에 따라 변경해야 할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 이 항목을 사이트의 일치 조건과 일치하도록 수정해야 할 수 있습니다.
- #button1
지불 창에서 사이트 방문자가 지불 방법을 선택하고 지불 정보를 채우고 지금 지불을 클릭하면 송금이 완료됩니다. 방문자는 지불을 확인하는 이메일을 받습니다.
다음 단계 (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
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
댓글