동작
구성
액세스 콘텐츠 마크업 사용 및 구매 목록 표시
스타일 지정
현지화
애널리틱스
AMP 액세스와 함께 AMP 액세스 LaterPay 사용
관련 문서
확인

amp-access-laterpay

Description

게시자가 LaterPay 소액결제 플랫폼과 손쉽게 통합할 수 있습니다.

Required Scripts

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>

예제

amp-access-laterpay

게시자가 LaterPay 소액결제 플랫폼과 손쉽게 통합할 수 있습니다. amp-access-laterpay는 AMP 액세스를 기반으로 하며 AMP 액세스가 필요합니다.

필수 스크립트

'amp-access-laterpay', 'amp-access', 'amp-analytics'용 스크립트가 필요합니다.

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js">

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js">

예 AMP By Example의 annotated amp-access-laterpay 예를 참조하세요.

동작

LaterPay는 사용자가 클릭 두 번으로 모든 온라인 콘텐츠를 구매하고, 사전 등록, 개인 데이터 또는 결제 없이 즉시 액세스할 수 있는 소액결제 플랫폼입니다. 사용자는 구매 금액이 웹사이트 전체에서 총 5달러 또는 5유로에 도달한 경우에만 금액을 지불합니다. 콘텐츠 제공업체는 개별 상품 또는 고정 요금이나 제한된 시간만큼 콘텐츠에 액세스할 수 있는 시간 패스를 판매할 수 있습니다.

커넥터 스크립트 통합으로 LaterPay를 통합하는 경우 AMP 페이지에서는 이 통합을 사용할 수 없습니다. amp-access-laterpay는 커넥터 스크립트와 유사하여 비슷한 기능을 제공하지만 AMP 페이지용으로 빌드되었습니다.

간단히 amp-access-laterpay를 유일한 통합 방법으로 사용하여 LaterPay를 통해 콘텐츠를 판매할 수도 있습니다.

amp-access-laterpay 구성요소는 내부적으로 AMP 액세스를 사용해 AMP 액세스와 비슷한 동작을 제공하지만, LaterPay 서비스와 함께 사용하도록 맞춤설정되었습니다.

AMP 액세스와 함께 사용하려는 자체 페이월 서비스가 있고 동일한 페이지에서 이 서비스를 LaterPay와 함께 사용하려는 경우 그렇게 할 수도 있습니다.

amp-access-laterpay 구성요소는 LaterPay 서비스와 함께 사용하도록 미리 구성되었기 때문에 승인이나 핑백 구성이 필요하지 않습니다. 또한 로그인 링크를 수동으로 설정할 필요가 없습니다.

게시자의 LaterPay 계정에 다양한 구매 옵션을 구성할 수 있으며, 구성요소에서는 구성을 가져와서 이용 가능한 구매 옵션 목록을 만듭니다.

구매 옵션을 구성하는 방법을 알아보려면 LaterPay 커넥터, LaterPay의 기존 프런트 엔드 통합 구성에 관한 문서를 참조하세요.

생성된 목록은 게시자의 환경설정에 따라 스타일이 지정되고 표시될 수 있습니다.

또한 이 구성요소는 액세스 콘텐츠 마크업을 사용해 콘텐츠를 표시하고 숨깁니다.

구성

구성은 AMP 액세스와 비슷하지만 승인, 핑백, 로그인 링크가 필요하지 않습니다.

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
      }
    }
</script>

laterpay 구성 개체에 다음 값을 설정할 수 있습니다.

속성	값	설명
`articleTitleSelector`	CSS 선택기 필수	페이지에서 기사 제목을 포함하는 요소를 결정하는 CSS 선택기입니다. 이 속성을 사용하면 기사를 구매할 때 표시되는 페이지에 제목이 포함되어 사용자가 구매 내용을 알 수 있습니다.
`articleId`	쉼표로 구분된 식별자 목록	기본적으로 기사의 URL은 구매 옵션과 일치시키는 데 사용되지만, 구매 옵션의 URL 경로를 지정하는 대신 LaterPay 커넥터 UI에 기사 ID를 설정한 다음 `articleId` 속성을 사용해 구매 옵션과 기사를 일치시킬 수 있습니다. 기사의 URL에 의한 구매 옵션 일치가 충분히 유연하지 않은 경우 필요합니다. 이 속성이 유용한 몇 가지 예제 시나리오를 자세히 살펴보려면 LaterPay Connector() 구성 페이지를 참조하세요.
`jwt`	동적 결제 구성을 위한 JWT 토큰	이 옵션을 사용하면 이용 가능한 유료 콘텐츠 구성으로 서명된 JSON 웹 토큰을 지정할 수 있습니다. 즉, LaterPay의 커넥터 관리 인터페이스에 수동으로 지정하는 것이 아니라 페이지에서 프로그래매틱 방식으로 생성되는 인페이지 구성을 제공할 수 있습니다. 이 옵션은 여러 기사의 단일 구매를 구성할 때 특히 유용할 수 있습니다. 이 토큰을 만드는 방법과 토큰에 지정될 수 있는 콘텐츠에 대한 자세한 내용은 커넥터 스크립트 통합에 관한 LaterPay의 JWT 유료 콘텐츠 API 문서를 참조하세요.
`locale`	문자열	언어에 적합한 가격 형식 지정 스타일을 정의합니다.
`localeMessages`	개체	게시자가 생성된 구매 옵션 목록에 표시된 텍스트를 맞춤설정하거나 현지화할 수 있게 합니다. 자세한 내용은 현지화 섹션을 참조하세요.
`scrollToTopAfterAuth`	부울	true이면 승인 프로세스가 완료된 후 페이지를 맨 위로 스크롤합니다. 이 옵션은 대화상자를 표시하는 위치가 페이지 하단에 있고 사용자가 페이지로 돌아간 후 현재 스크롤 위치로 인해 혼란스러워할 수 있는 경우 유용합니다.
`region`	문자열	`eu` 또는 `us` LaterPay 지역에 있는 경우 지정합니다.
`sandbox`	부울	샌드박스 모드를 사용해 서버 구성을 테스트하는 경우에만 필요합니다. AMP의 개발 모드도 사용해야 합니다.

액세스 콘텐츠 마크업 사용 및 구매 목록 표시

액세스 콘텐츠 마크업은 AMP 액세스와 동일한 방식으로 사용되어야 합니다.

ID amp-access-laterpay-dialog가 포함된 요소는 사용자가 기사 액세스 권한이 없을 때 구매 옵션 목록을 렌더링합니다. 이 목록은 몇 가지 매우 기본적인 스타일 지정을 포함하고 있으며 게시자의 페이지에 더욱 통합된 느낌을 주도록 맞춤설정될 수 있습니다.

기본 스타일 지정을 사용하려면 amp-access-laterpay 클래스를 추가해야 합니다.

<section amp-access="NOT error AND NOT access" amp-access-hide="">
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section class="error-section" amp-access="error" amp-access-hide="">
  죄송합니다. 문제가 발생했습니다.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...기사 내용...</p>
</div>

스타일 지정

여러 클래스가 생성된 마크업의 일부 요소에 적용됩니다. 클래스가 없는 요소는 CSS 요소 선택기를 통해 명확히 참조될 수 있습니다.

일부 기본 레이아웃 CSS가 이미 있지만 게시자는 페이지의 디자인과 분위기가 일치하도록 스타일을 지정하는 것이 좋습니다.

대화상자용으로 생성된 구조의 형식은 다음과 같습니다.

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      선택사항이며 헤더 언어 메시지가 정의된 경우 표시됩니다.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">구매 옵션 제목</span>
              <p class="amp-access-laterpay-description">구매 옵션 설명</p>
            </div>
          </label>
          <p class="amp-access-laterpay-price-container">
            <span class="amp-access-laterpay-price">0.15</span>
            <sup class="amp-access-laterpay-currency">USD</sup>
          </p>
        </li>
        <!-- ... 다른 구매 옵션을 위한 추가 목록 항목 ... -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">지금 구매</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="...">이미 구매함</a>
      </p>
      <p class="amp-access-laterpay-footer">
        선택사항이며 바닥글 언어 메시지가 정의된 경우 표시됩니다.
      </p>
    </div>
    <p class="amp-access-laterpay-badge"><a href="https://laterpay.net" target="_blank">LaterPay</a> 제공</p>
  </div>

현지화

구매 옵션의 대화상자에 표시된 텍스트는 게시자가 LaterPay 커넥터 UI에 정의합니다.

나머지 텍스트는 확장된 구성요소의 일부이며 다음과 같이 구성 옵션을 통해 변경 및 현지화될 수 있습니다.

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "localeMessages": {
        "messageKey": "message value"
        }
      }
    }
</script>

다음 메시지 키는 번역되거나 맞춤설정될 수 있지만 원래 의미와 의도가 유지되어야 합니다.

키	설명	기본값
`payLaterButton`	나중에 지불할 수 있는 옵션용 구매 버튼에 표시되는 텍스트입니다.	'지금 구매하고 나중에 지불'
`payNowButton`	구매 시 지불해야 할 옵션용 구매 버튼에 표시되는 텍스트입니다.	'지금 구매'
`defaultButton`	옵션이 선택되기 전 구매 버튼에 표시되는 기본 텍스트입니다.	'지금 구매'
`alreadyPurchasedLink`	사용자가 이전에 기사를 구매했지만 쿠키를 분실했거나 쿠키가 다른 기기에 있는 경우 이 링크를 사용해 LaterPay에 로그인하고 구매 항목을 검색할 수 있습니다.	'이미 구매함'
`header`	머리글 텍스트(선택사항)입니다.
`footer`	바닥글 텍스트(선택사항)입니다.

애널리틱스

amp-access-laterpay는 amp-access 기반이므로 amp-access에서 보낸 모든 애널리틱스 이벤트를 지원합니다.

https://ampexample.laterpay.net/의 예는 모두 실제 작동 방식에 관한 더 완전한 예를 보려는 경우 이러한 애널리틱스 이벤트를 보내도록 구성되어 있습니다.

AMP 액세스와 함께 AMP 액세스 LaterPay 사용

기존 구독 시스템이 있고 개별 기사 판매에만 LaterPay를 사용하려는 경우 AMP 액세스와 AMP 액세스 LaterPay를 함께 사용하여 동일한 페이지에 두 가지 판매 방법을 동시에 사용할 수 있습니다.

먼저 기존 페이월과 함께 AMP 액세스를 구성하는 방법을 알아보려면 AMP 액세스 문서를 참조하세요.

여러 제공업체 섹션에서는 네임스페이스로 여러 제공업체를 설정하는 방법을 설명합니다.

LaterPay 및 기존 페이월 통합과 함께 사용하는 경우 필수 구성 형식은 다음과 같을 수 있습니다.

<script id="amp-access" type="application/json">
  [
    {
      "vendor": "laterpay",
      "laterpay": {
        "region": "us"
      },
      "namespace": "laterpay"
    },
    {
      "authorization":
          "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL",
      "pingback":
          "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
      "login":
          "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL",
      "authorizationFallbackResponse": {"error": true},
      "namespace": "publishername"
    }
  ]
</script>

반면 콘텐츠 액세스 마크업 형식은 다음과 같이 될 수 있습니다.

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">PublisherName 구독에 액세스하려면 여기에서 로그인하세요.</a>
  </p>

  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section class="error-section" amp-access="error" amp-access-hide>
  죄송합니다. 문제가 발생했습니다.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...기사 내용...</p>
</div>

https://ampexample.laterpay.net/dual-amp-access.html에서 더 완전한 예를 참조하세요.

확인

AMP 유효성 검사기 사양의 amp-access-laterpay 규칙을 참조하세요.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동

버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기

amp-access-laterpay 0.2 0.1

Description

Required Scripts

예제

동작

구성

액세스 콘텐츠 마크업 사용 및 구매 목록 표시

스타일 지정

현지화

애널리틱스

AMP 액세스와 함께 AMP 액세스 LaterPay 사용

관련 문서

확인

amp-access-laterpay