این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

Google Pay API برای وب 101: اصول

1. مقدمه

چیزی که خواهی ساخت

پس از تکمیل این کد لبه، شما یک وب سایت حداقلی با قابلیت ادغام Google Pay خواهید داشت. این پروژه یک رمز پرداخت را بازیابی می کند که ممکن است برای پردازش به یک ارائه دهنده خدمات پرداخت ارسال شود.

چیزی که یاد خواهید گرفت

نحوه بارگیری و پیکربندی Google Pay API
نحوه نمایش دکمه Google Pay و مدیریت کلیک ها
نحوه درخواست رمز پرداخت از Google Pay

آنچه شما نیاز دارید

یک ویرایشگر متن انتخابی شما برای ویرایش فایل های HTML و جاوا اسکریپت.
مرورگر وب Google Chrome یا روش دیگری برای آزمایش یک وب سایت محلی.
برای تولید، merchantId Google Pay نیاز دارید. ثبت‌نام در Google Pay & Wallet Console فقط یک دقیقه طول می‌کشد، بنابراین می‌توانید همین الان از آن مراقبت کنید.

با استفاده از Project IDX همراه باشید

2. صفحه HTML را ایجاد کنید

ایجاد فایل های پروژه

یک پوشه در رایانه خود به نام gpay-web-101 ایجاد کنید و در داخل آن پوشه دو فایل متنی خالی به نام‌های index.html و main.js ایجاد کنید. ساختار دایرکتوری شما باید به شکل زیر باشد:
```
gpay-web-101/
  index.html
  main.js
```

index.html در IDE انتخابی خود باز کنید و کد زیر را اضافه کنید:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

توضیح کد

یک DIV خالی با شناسه gpay-container به صفحه اضافه می شود. این عنصر DOM عنصر اصلی خواهد بود که دکمه Google Pay در آن اضافه شده است. می توانید در صورت لزوم این عنصر را در طرح بندی وب سایت خود قرار دهید.
تگ اسکریپت main.js در DOM بعد از عنصر gpay-container قرار می گیرد. این برای اطمینان از وجود DIV کانتینر در DOM قبل از درخواست main.js برای آن ضروری است. علاوه بر این، اسکریپت همزمان است تا اطمینان حاصل شود که قبل از بارگیری pay.js بارگیری شده است زیرا متد onGooglePayLoaded() باید قبل از تکمیل بارگذاری وجود داشته باشد. راه های دیگری نیز برای دستیابی به همین اثر وجود دارد، اما در اینجا مورد بحث قرار نمی گیرند.
در نهایت pay.js به صورت ناهمزمان بارگیری می‌شود و onGooglePayLoaded() آن را به‌عنوان onload handler پیکربندی می‌کند. این روش در main.js تعریف خواهد شد.

3. Google Pay را پیکربندی کنید

درخواست پرداخت Google Pay به یک شی درخواست نیاز دارد. شی تعریف شده در اینجا به عنوان baseGooglePayRequest حاوی حداقل تنظیمات مشترک برای همه درخواست ها است. تنظیمات اضافی بسته به درخواست انجام شده اضافه خواهد شد که در این کد لبه بررسی خواهیم کرد.

ثابت های پیکربندی Google Pay را به فایل خالی main.js اضافه کنید:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

توضیح کد

متغیر ثابت GPAY_BUTTON_CONTAINER_ID را روی شناسه عنصر DOM استفاده شده در صفحه HTML به عنوان محفظه والد برای دکمه Google Pay تنظیم کنید.
شی پیکربندی baseGooglePayRequest را با تنظیمات مربوطه برای برنامه خود ایجاد کنید. هر یک از ویژگی ها و مقادیر را می توان در مستندات مرجع یافت. مقادیر نشان داده شده در این مثال ممکن است کاملاً با نیازهای شما مطابقت داشته باشد یا نباشد، بنابراین به دقت بررسی کنید.
ویژگی های merchantId و merchantName را با مقادیر خود به روز کنید. این فیلدها زمانی که محیط TEST باشد اختیاری هستند.

منابع

پست وبلاگ : می خواهید پرداخت راحت تری با Google Pay داشته باشید؟ گزینه های پرداخت خود را پیکربندی کنید!
مرجع API : اسناد اشیاء درخواست Google Pay API
مرجع API : برای اطلاعات بیشتر در مورد روش‌های مجوز مجاز، شبکه‌های کارت مجاز، و مشخصات توکن‌سازی از جمله ارزش دروازه مناسب، به PaymentMethod مراجعه کنید.

4. مشتری پرداخت را اضافه کنید

یک مشتری پرداخت برای درخواست پرداخت و ثبت پاسخ تماس استفاده می شود. در این کد لبه ما فقط درخواست پرداخت می کنیم. به‌علاوه، می‌توانید PaymentDataCallbacks برای رسیدگی به زمانی که داده‌های پرداخت تغییر کرده یا مجوز تغییر کرده است، پیکربندی کنید. با این حال، این موضوعات پیشرفته در این نرم افزار کد پوشش داده نشده است.

این کد مشتری را به پایین main.js اضافه کنید:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

توضیح کد

متغیر paymentsClient پس از ایجاد نمونه، آن را برای مشتری نگه می دارد. این متغیر مستقیماً توسط کد ما قابل دسترسی نیست، بلکه همیشه توسط متد getGooglePaymentsClient() قابل دسترسی است.
متد getGooglePaymentsClient() بررسی می کند که آیا یک کلاینت قبلاً نمونه سازی شده است یا خیر و آن نمونه را برمی گرداند. اگر یکی قبلاً نمونه سازی نشده بود، یکی ایجاد می شود، ذخیره می شود و برگردانده می شود. این روش تضمین می کند که تنها یک نمونه در طول عمر این اسکریپت ایجاد و استفاده می شود.
برای نمونه سازی یک مشتری، متد PaymentsClient() فراخوانی می شود. در این مثال، ما به مشتری می گوییم که در یک محیط TEST هستیم. جایگزین PRODUCTION است. با این حال، TEST پیش فرض است و ممکن است حذف شود.

5. کمک کننده اضافه کنید

توابع کمکی زیر بعداً در اسکریپت استفاده می‌شوند و تنها با هدف بهبود خوانایی کد و قابلیت نگهداری اضافه شده‌اند.

توابع کمکی را به پایین main.js اضافه کنید:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

توضیح کد

deepCopy() ابزاری است که از سریال‌سازی و سریال‌زدایی JSON برای ایجاد یک کپی عمیق از شی ارائه شده استفاده می‌کند. این یک راه راحت برای شبیه سازی اشیاء بدون نگرانی در مورد مراجع مشترک است.
renderGooglePayButton() ابزاری است که روش کتابخانه createButton() برای نمایش دکمه Google Pay فراخوانی می کند. آرگومان تصویب شده مجموعه‌ای از گزینه‌ها است که نحوه عملکرد دکمه را تعریف می‌کند، مانند ثبت کردن تابع onGooglePaymentButtonClicked() برای مدیریت کلیک‌های دکمه.

6. کنترل کننده رویداد را اضافه کنید

در این اسکریپت ما دو کنترل کننده رویداد را پیکربندی می کنیم. اولین مورد زمانی فراخوانی می شود که کتابخانه pay.js بارگیری تمام می شود و دیگری با کلیک روی دکمه Google Pay فراخوانی می شود.

کنترل کننده های رویداد را به پایین main.js اضافه کنید:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

توضیح کد

onGooglePayLoaded() زمانی فراخوانی می شود که اسکریپت pay.js طبق تعریف در فایل HTML بارگیری کامل شود. متد isReadyToPay() برای تعیین اینکه آیا دکمه Google Pay نمایش داده شود یا نه فراخوانی می شود. اگر مصرف کننده آماده پرداخت باشد (به این معنی که یک روش پرداخت را به Google Wallet خود اضافه کرده است) دکمه Google Pay ارائه می شود.
با کلیک روی دکمه Google Pay onGooglePaymentButtonClicked() فراخوانی می شود. این روش متد کتابخانه loadPaymentData() را فراخوانی می کند که برای بازیابی رمز پرداخت استفاده می شود. پس از دریافت رمز پرداخت، آن را برای پردازش تراکنش به درگاه پرداخت خود ارسال می کنید. transactionInfo تراکنشی را توضیح می دهد که باید با کلیک روی این دکمه پردازش شود.

7. نتیجه گیری

بابت تکمیل این Codelab تبریک می گویم! شما یاد گرفته اید که چگونه API Google Pay را در یک وب سایت ادغام کنید.

پروژه را اجرا کنید

با گوگل کروم تست کنید

با استفاده از مرورگر وب Google Chrome ، index.html با استفاده از File > Open File... از منوی اصلی Chrome باز کنید. وقتی پروژه به این شکل باز شود، Chrome main.js را اجرا می کند. سایر مرورگرهای وب ممکن است اجازه اجرای جاوا اسکریپت را ندهند.

– یا –

با یک وب سرور محلی تست کنید

اگر پایتون را نصب کرده اید، python3 -m http.server از یک دستور ترمینال در پوشه root pay-web-101 اجرا کنید.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

سپس، از سایت خود در http://localhost:8000 دیدن کنید.

از اینجا به کجا برویم

منابع اضافی

به گفتگو در کانال #پرداخت در دیسکورد بپیوندید
@GooglePayDevs را در X دنبال کنید
ویدیوهای مرتبط با Google Pay را در YouTube تماشا کنید