SvelteKit을 사용한 웹 네이티브 결제 API

다음과 같은 경우 읽기:

SvelteKit의 결제 통합에 관심이 있습니다

.

자원

Google Pay Button Example Source Code

Web Payment Request Examples by Google

MDN Docs for Web Payment

Google Web Devs Docs

소개
이 기사는 우리가 모든 제3자 결제 통합을 사용할 때 얼마나 많은 고통을 처리해야 하는지 알고 있고 때때로 그것을 추가하는 것을 좋아하지 않을 수 있기 때문에 프로젝트에 번거로움 없이 결제 통합을 수행하는 방법에 대해 설명합니다. 옵션이 없습니다. 여기에서 웹 기본 결제 API가 제공됩니다. 해당 결제를 처리하기 위한 최소한의 작업만 있으면 됩니다. 여기에서는 SvelteKit에서 이를 수행하는 예를 보여드리겠습니다. Google 결제 샘플의 예입니다.

여기서는 use svelte 동작을 사용하여 더 쉽게 만들 것입니다.
항상 그렇듯이 먼저 SvelteKit 프로젝트를 설정합니다. 방법을 배우고 싶다면 그냥 .

프로젝트 설정 후 다음 설정을 따르십시오.

결제 시작 설정

따라서 여기서는 use 작업을 사용하고 lib/pay.js 파일에 추가할 Javascript 코드를 호출하는 버튼을 추가하기만 하면 됩니다.

// index.svelte
<script>
    import { payTest } from '../lib/pay.js';
</script>

<div><button id="buyButton" use:payTest>Buy</button></div>
<div><pre id="result" /></div>

알 수 있듯이 여기서는 use 작업을 사용하여 작업을 수행하고 있습니다.

이제 lib라는 이름으로 pay.js 폴더에 파일을 생성합니다. 이제 번거로운 작업을 수행할 몇 줄의 코드를 추가할 것입니다.

/**
 * Builds PaymentRequest that also gathers user's shipping address, but does not
 * show any UI yet.
 *
 * @return {PaymentRequest} The PaymentRequest object.
 */
function initPaymentRequest() {
  let supportedInstruments = [{
    supportedMethods: 'https://bobbucks.dev/pay',
  }];

  let details = {
    total: {label: 'Donation', amount: {currency: 'USD', value: '55.00'}},
    displayItems: [
      {
        label: 'Original donation amount',
        amount: {currency: 'USD', value: '65.00'},
      },
      {
        label: 'Friends and family discount',
        amount: {currency: 'USD', value: '-10.00'},
      },
      {
        label: 'Free shipping worldwide',
        amount: {currency: 'USD', value: '0.00'},
      },
    ],
    shippingOptions: [{
      id: 'freeWorldwideShipping',
      label: 'Free shipping worldwide',
      amount: {currency: 'USD', value: '0.00'},
      selected: true,
    }],
  };

  let options = {requestShipping: true};

  let request = new PaymentRequest(supportedInstruments, details, options);

  request.addEventListener('shippingaddresschange', function(evt) {
    evt.updateWith(Promise.resolve(details));
  });

  return request;
}

/**
 * Invokes PaymentRequest that also gathers user's shipping address.
 *
 * @param {PaymentRequest} request The PaymentRequest object.
 */
function onBuyClicked(request) {
  request.show().then(function(instrumentResponse) {
    sendPaymentToServer(instrumentResponse);
  })
  .catch(function(err) {
    ChromeSamples.setStatus(err);
  });
}

/**
 * Simulates processing the payment data on the server.
 *
 * @private
 * @param {PaymentResponse} instrumentResponse The payment information to
 * process.
 */
function sendPaymentToServer(instrumentResponse) {
  // There's no server-side component of these samples. No transactions are
  // processed and no money exchanged hands. Instantaneous transactions are not
  // realistic. Add a 2 second delay to make it seem more real.
  window.setTimeout(function() {
    instrumentResponse.complete('success')
        .then(function() {
          document.getElementById('result').innerHTML =
              instrumentToJsonString(instrumentResponse);
        })
        .catch(function(err) {
          ChromeSamples.setStatus(err);
        });
  }, 2000);
}

/**
 * Converts the payment instrument into a JSON string.
 *
 * @private
 * @param {PaymentResponse} instrument The instrument to convert.
 * @return {string} The JSON string representation of the instrument.
 */
function instrumentToJsonString(instrument) {
  let details = instrument.details;

  return JSON.stringify({
    methodName: instrument.methodName,
    details: details,
    shippingAddress: addressToDictionary(instrument.shippingAddress),
    shippingOption: instrument.shippingOption,
  }, undefined, 2);
}

/**
 * Converts the shipping address into a dictionary.
 *
 * @private
 * @param {PaymentAddress} address The address to convert.
 * @return {object} The dictionary representation of the shipping address.
 */
function addressToDictionary(address) {
  if (address.toJSON) {
    return address.toJSON();
  }

  return {
    recipient: address.recipient,
    organization: address.organization,
    addressLine: address.addressLine,
    dependentLocality: address.dependentLocality,
    city: address.city,
    region: address.region,
    postalCode: address.postalCode,
    sortingCode: address.sortingCode,
    country: address.country,
    languageCode: address.languageCode,
    phone: address.phone,
  };
}

const payButton = document.getElementById('buyButton');
payButton.setAttribute('style', 'display: none;');
if (window.PaymentRequest) {
  let request = initPaymentRequest();
  payButton.setAttribute('style', 'display: inline;');
  payButton.addEventListener('click', function() {
    onBuyClicked(request);
    request = initPaymentRequest();
  });
} else {
  ChromeSamples.setStatus('This browser does not support web payments');
}

여기에서 먼저 클릭할 버튼을 가져오고 할당하면 결제 흐름이 시작됩니다.

initPaymentRequest 함수는 지불 요청 유형의 일부 값을 반환합니다.

new PaymentRequest(supportedInstruments, details, options);

supportedInstruments는 귀하가 지원하는 결제 방법이고 세부 정보는 결제에 대한 데이터이며 옵션은 배송 필드를 표시하기 위해 결제 API에 대한 요구 사항을 설명할 수 있는 선택 사항입니다.

그런 다음 Web Native Payment가 제공된 데이터 및 옵션을 기반으로 모든 것을 처리하고 결국 모든 응답을 반환합니다.

그게 우리가 해야 할 전부입니다. 이것은 Google 지불 예제의 예이며 google-pay-button를 사용하여 삶을 더 쉽게 만들어 줄 무언가가 있습니다. 제공된 리소스에서 확인할 수 있습니다.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.