결제 수단 설정

웹 결제를 사용한 결제 거래는 결제 앱의 검색으로 시작됩니다. 결제 수단을 설정하고 판매자와 고객이 결제할 수 있도록 결제 앱을 준비하는 방법을 알아봅니다.

Eiji Kitamura

Payment Request API를 사용하려면 결제 앱을 결제 수단 식별자와 연결해야 합니다. 결제 앱과 통합하려는 판매자는 결제 수단 식별자를 사용하여 브라우저에 이를 표시합니다. 이 문서에서는 결제 앱 검색의 작동 방식과 브라우저에서 결제 앱을 올바르게 검색하고 호출하도록 구성하는 방법을 설명합니다.

웹 결제의 개념이나 결제 앱을 통한 결제 트랜잭션의 작동 방식을 처음 접하는 경우 먼저 다음 도움말을 읽어보세요.

• Web Payments로 결제 앱 역량 강화
• 결제 거래 수명

브라우저 지원

웹 결제는 몇 가지 기술로 구성되며 지원 상태는 브라우저에 따라 다릅니다.

브라우저에서 결제 앱을 찾는 방법

모든 결제 앱은 다음을 제공해야 합니다.

• URL 기반 결제 수단 식별자
• 결제 수단 매니페스트 (서드 파티가 결제 수단 식별자를 제공하는 경우 제외)
• 웹 앱 매니페스트

탐색 프로세스는 판매자가 거래를 시작하면 시작됩니다.

1. 브라우저가 결제 수단 식별자 URL에 요청을 전송하고 결제 수단 매니페스트를 가져옵니다.
2. 브라우저가 결제 수단 매니페스트에서 웹 앱 매니페스트 URL을 확인하여 웹 앱 매니페스트를 가져옵니다.
3. 브라우저는 웹 앱 매니페스트에서 OS 결제 앱을 실행할지 아니면 웹 기반 결제 앱을 실행할지 결정합니다.

다음 섹션에서는 브라우저가 검색할 수 있도록 자체 결제 수단을 설정하는 방법을 자세히 설명합니다.

1단계: 결제 수단 식별자 제공

결제 수단 식별자는 URL 기반 문자열입니다. 예를 들어 Google Pay의 식별자는 https://google.com/pay입니다. 결제 앱 개발자는 URL을 제어할 수 있고 임의의 콘텐츠를 제공할 수 있는 한 어떤 URL이든 결제 수단 식별자로 선택할 수 있습니다. 이 도움말에서는 https://bobbucks.dev/pay를 결제 수단 식별자로 사용합니다.

판매자가 결제 수단 식별자를 사용하는 방법

PaymentRequest 객체는 판매자가 수락하기로 결정한 결제 앱을 식별하는 결제 수단 식별자 목록으로 구성됩니다. 결제 수단 식별자는 supportedMethods 속성 값으로 설정됩니다. 예를 들면 다음과 같습니다.

[판매자] 가 결제를 요청하는 경우:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

2단계: 결제 수단 매니페스트 제공

결제 수단 매니페스트는 이 결제 수단을 사용할 수 있는 결제 앱을 정의하는 JSON 파일입니다.

결제 수단 매니페스트 제공

판매자가 결제 거래를 시작하면 브라우저가 결제 수단 식별자 URL로 HTTP GET 요청을 전송합니다. 서버가 결제 수단 매니페스트 본문으로 응답합니다.

결제 수단 매니페스트에는 default_applications와 supported_origins라는 두 가지 필드가 있습니다.

결제 수단 매니페스트 파일은 다음과 같습니다.

[결제 핸들러] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

브라우저는 default_applications 필드를 읽을 때 지원되는 결제 앱의 웹 앱 매니페스트 링크 목록을 찾습니다.

원하는 경우 브라우저를 라우팅하여 다른 위치에서 결제 수단 매니페스트를 찾습니다.

결제 수단 식별자 URL은 선택적으로 브라우저가 결제 수단 매니페스트를 가져올 수 있는 다른 URL을 가리키는 Link 헤더를 사용하여 응답할 수 있습니다. 이는 결제 수단 매니페스트가 다른 서버에서 호스팅되거나 서드 파티가 결제 앱을 제공할 때 유용합니다.

rel="payment-method-manifest" 속성과 결제 수단 매니페스트 URL을 사용하여 HTTP Link 헤더로 응답하도록 결제 수단 서버를 구성합니다.

예를 들어 매니페스트가 https://bobbucks.dev/payment-manifest.json에 있으면 응답 헤더에 다음이 포함됩니다.

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

URL은 정규화된 도메인 이름 또는 상대 경로일 수 있습니다. 예를 보려면 https://bobbucks.dev/pay/에서 네트워크 트래픽을 검사합니다. curl 명령어를 사용할 수도 있습니다.

curl --include https://bobbucks.dev/pay

3단계: 웹 앱 매니페스트 제공

웹 앱 매니페스트는 이름에서 알 수 있듯이 웹 앱을 정의하는 데 사용됩니다. 프로그레시브 웹 앱 (PWA)을 정의하는 데 널리 사용되는 매니페스트 파일입니다.

일반적인 웹 앱 매니페스트는 다음과 같습니다.

[결제 핸들러] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

웹 앱 매니페스트에 설명된 정보는 결제 앱이 결제 요청 UI에 표시되는 방법을 정의하는 데도 사용됩니다.

웹 앱 매니페스트의 name 속성은 결제 앱 이름으로 사용되고 icons 속성은 결제 앱 아이콘으로 사용됩니다.

Chrome에서 실행할 결제 앱을 결정하는 방법

플랫폼별 결제 앱 실행

플랫폼별 결제 앱을 실행하려면 다음 조건을 충족해야 합니다.

• related_applications 필드는 웹 앱 매니페스트에 지정되며,
  • 설치된 앱의 패키지 ID와 서명이 일치하지만 웹 앱 매니페스트의 최소 버전 (min_version)은 설치된 애플리케이션의 버전 이하입니다.
• prefer_related_applications 필드는 true입니다.
• 플랫폼별 결제 앱이 설치되고 다음을 포함합니다.
  • org.chromium.action.PAY의 인텐트 필터.
  • org.chromium.default_payment_method_name 속성의 값으로 지정된 결제 수단 식별자입니다.

설정 방법에 관한 자세한 내용은 Android 결제 앱: 개발자 가이드를 참고하세요.

[결제 핸들러] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

브라우저에서 플랫폼별 결제 앱을 사용할 수 있다고 판단하면 여기에서 검색 흐름이 종료됩니다. 그 외의 경우에는 다음 단계인 웹 기반 결제 앱 실행으로 넘어갑니다.

웹 기반 결제 앱 실행

웹 기반 결제 앱은 웹 앱 매니페스트의 serviceworker 필드에 지정해야 합니다.

[결제 핸들러] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

브라우저는 서비스 워커에 paymentrequest 이벤트를 전송하여 웹 기반 결제 앱을 시작합니다. 서비스 워커를 미리 등록할 필요는 없습니다. 적시에 등록할 수 있습니다.

특별 최적화 이해하기

브라우저에서 결제 요청 UI를 건너뛰고 결제 앱을 바로 실행하는 방법

Chrome에서 PaymentRequest의 show() 메서드가 호출되면 Payment Request API가 'Payment Request UI'라는 브라우저에서 제공하는 UI를 표시합니다. 이 UI를 통해 사용자는 결제 앱을 선택할 수 있습니다. 결제 요청 UI에서 계속 버튼을 누르면 선택한 결제 앱이 실행됩니다.

결제 앱을 출시하기 전에 결제 요청 UI를 표시하면 사용자가 결제를 처리하는 데 필요한 단계 수가 늘어납니다. 프로세스를 최적화하기 위해 브라우저는 show()가 호출될 때 결제 요청 UI를 표시하지 않고 해당 정보의 처리를 결제 앱에 위임하고 결제 앱을 직접 실행할 수 있습니다.

결제 앱을 직접 실행하려면 다음 조건을 충족해야 합니다.

• show()는 사용자 동작 (예: 마우스 클릭)으로 트리거됩니다.
• 다음과 같은 단일 결제 앱만 있습니다.
  • 요청된 결제 수단 식별자를 지원합니다.

웹 기반 결제 앱은 언제 적시 (JIT)로 등록되나요?

웹 기반 결제 앱은 사용자가 명시적으로 결제 앱 웹사이트를 방문하고 서비스 워커를 등록하지 않아도 실행할 수 있습니다. 서비스 워커는 사용자가 웹 기반 결제 앱으로 지불하기로 선택할 때 적시에 등록될 수 있습니다. 등록 시점에는 두 가지 변형이 있습니다.

• 결제 요청 UI가 사용자에게 표시되면 앱이 적시에 등록되고 사용자가 계속을 클릭할 때 실행됩니다.
• 결제 요청 UI를 건너뛰면 결제 앱이 적시에 등록되고 바로 실행됩니다. 적시 등록 앱을 실행하기 위해 결제 요청 UI를 건너뛰려면 사용자 동작이 필요하며, 이를 통해 교차 출처 서비스 워커가 예기치 않게 등록되는 것을 방지할 수 있습니다.

다음 단계

이제 결제 앱을 검색할 수 있으므로 플랫폼별 결제 앱 및 웹 기반 결제 앱을 개발하는 방법을 알아봅니다.

• Android 결제 앱: 개발자 가이드
• 웹 기반 결제 앱 개발자 가이드