Bubble.io와 Sage Pay 통합: 단계별 가이드 2024

Bubble.io와 Sage Pay를 통합하는 것은 일련의 특정 단계를 필요로 합니다. 이 가이드에서는 이미 Bubble.io 계정과 Sage Pay 계정이 있음을 가정하고 있습니다. 이 과정은 Sage Pay를 통해 API를 설정하고, Bubble.io로 이동하여 API를 통합하는 것을 포함합니다.

##Sage Pay API 설정:

1단계: Sage Pay 계정에 로그인합니다. 로그인 페이지 URL은 일반적으로 다음과 같습니다 : https://live.sagepay.com/mysagepay/login.msp

2단계: 로그인한 후 계정 대시보드 왼쪽 패널의 "설정" 탭으로 이동합니다.

3단계: “API 접근” 부탭을 선택합니다.

4단계: API 접근 섹션에서 "새 API키"를 선택합니다. 팝업 창에 API 키의 이름을 입력합니다.

5단계: Sage Pay에서 API 키를 생성해줍니다. 이 API 키를 나중에 필요하므로 꼭 저장하는 것이 좋습니다.

##Bubble.io API 설정:

6단계: Bubble.io 계정으로 전환하여 로그인합니다.

7단계: 로그인한 후 앱을 클릭한 다음 왼쪽 패널의 '플러그인' 탭을 선택합니다.

8단계: 플러그인 페이지에서 "+ 플러그인 추가" 버튼을 클릭합니다.

9단계: 나타나는 검색 창에서 "API Connector"를 입력합니다. Bubble에서 개발한 'API Connector’ 플러그인을 선택하고 '설치'를 클릭합니다.

10단계: 설치가 완료되면 앱으로 돌아가서 왼쪽 패널에서 '설정' 탭을 선택한 다음 'API' 부탭을 선택합니다.

11단계: API 공급자 드롭다운 메뉴에서 'API Connector'를 선택합니다.

12단계: 이 API 커넥터 페이지에서 '또 다른 API 추가'를 클릭합니다.

13단계: 여기서 API를 설정해야 합니다. API에 이름을 주십시오. 인증 방법으로 '원래 키'를 선택하세요. 키 입력 필드에는 Sage Pay 계정에서 저장한 API 키를 입력하세요.

14단계: API 호출을 정의하세요. 앱이 결제 처리 기능에 접근할 수 있도록 POST 메소드를 정의해야 합니다. POST URL은 일반적으로 다음과 같습니다 : https://pi-test.sagepay.com/api/v1/transactions.

이를 위해서, JSON 형식의 페이로드도 필요합니다. 페이로드에는 벤더이름, 트랜잭션유형, 결제액과 통화, 카드정보 등이 포함됩니다. 일반적인 JSON 형식을 다음과 같습니다 :

{
  "vendorName": "your vendor name",
  "transactionType": "Payment",
  "paymentMethod": {
    "card": {
      "merchantSessionKey": "your session key",
      "cardIdentifier": "card identifier"
    }
  },
  "transactionId": "unique transaction id",
  "amount": transaction amount,
  "currency": "currency type"
}

'Content-Type' 헤더는 'application/json'이어야 하며 'Body Type'은 'JSON'을 선택하십시오. 'session key', 'card identifier', 'unique transaction id', 'transaction amount' 위치에 실제 정보를 넣어야 합니다.

15단계: 앱이 트랜잭션 상태를 확인하려면 GET 메소드를 정의할 수 있습니다. 이것은 일반적으로 'https://pi-test.sagepay.com/api/v1/transactions/{TransactionId}'와 같습니다. '{TransactionId}' 위치에 실제 Transaction ID를 넣어야 합니다.

16단계: "호출 초기화" 버튼을 클릭합니다. 모든 설정이 올바르게 되었다면, 이 호출은 성공적으로 완료되어 앱에서 사용할 수 있습니다.

17단계: 이제 이러한 API 호출을 Bubble.io 워크플로에서 사용할 준비가 되었습니다. 예를 들어, 사용자가 '지금 결제' 버튼을 클릭하면, Sage Pay에 'POST' API 호출을 생성하는 워크플로를 생성할 수 있습니다.

결론적으로, 이 가이드에서는 Sage Pay와 Bubble.io를 통합하는 방법을 시연하였습니다. 이는 Sage Pay와 Bubble.io에서 API를 설정하고, 이 API 호출을 Bubble.io 앱에서 사용하는 것을 포함하는 과정이었습니다. 이를 통해 Bubble.io 앱이 Sage Pay를 사용하여 결제를 처리할 수 있습니다.