به‌روزرسانی‌های Web Payments API

از تازه‌های پرداخت‌های وب به‌روز باشید.

Eiji Kitamura

Danyao Wang

Rouslan Solomakhin

پرداخت های وب از سال 2016 به صورت عمومی در مرورگرها در دسترس هستند. ویژگی اصلی - API درخواست پرداخت - اکنون در چندین مرورگر در دسترس است: Chrome، Safari، Edge و به زودی Firefox. اگر با Web Payments تازه کار هستید، برای شروع به «نمای کلی پرداخت های وب» نگاهی بیندازید.

از زمان راه‌اندازی Payment Request API و Payment Handler API ، تغییرات زیادی در مشخصات مربوطه آنها ایجاد شده است. این تغییرات کد کار شما را خراب نمی کند، اما توصیه می کنیم مراقب آنها باشید. این پست این به‌روزرسانی‌ها را خلاصه می‌کند و به جمع‌آوری آن تغییرات API ادامه خواهد داد.

روش جدید: hasEnrolledInstrument()

در نسخه قبلی API درخواست پرداخت، canMakePayment() برای بررسی حضور کاربر در ابزار پرداخت کاربر استفاده شد. در به‌روزرسانی اخیر این مشخصات، canMakePayment() با hasEnrolledInstrument() بدون تغییر عملکرد آن جایگزین شده است.

روش hasEnrolledInstrument() دارای اجماع همه مرورگرهای اصلی است. کروم آن را در نسخه 74 پیاده سازی کرده است و Webkit و Gecko هر دو دارای اشکالات ردیابی هستند اما هنوز از ژوئن 2019 این روش را اجرا نکرده اند.

برای استفاده از متد hasEnrolledInstrument() ، کدی را جایگزین کنید که به شکل زیر است:

// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);

با کدی که شبیه این است:

// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // hasEnrolledInstrument() is available.
  request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
  request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}

canMakePayment() دیگر وجود ابزار را بررسی نمی کند

از آنجایی که hasEnrolledInstrument() اکنون بررسی ابزار پرداخت کاربر را انجام می دهد، canMakePayment() به روز شده است تا فقط در دسترس بودن برنامه پرداخت را بررسی کند.

این تغییر به canMakePayment() به اجرای hasEnrolledInstrument() وابسته است. از ژوئن 2019، در Chrome 74 پیاده سازی شده است اما در هیچ مرورگر دیگری اجرا نمی شود. قبل از استفاده از متد hasEnrolledInstrument() حتما بررسی کنید که آیا در مرورگر کاربر موجود است یا خیر.

// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // `canMakePayment()` behavior change corresponds to
  // `hasEnrolledInstrument()` availability.
  request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
  console.log("Cannot check for payment app availability without checking for instrument presence.");
}

languageCode از روش پرداخت basic-card حذف شد

PaymentAddress.languageCode از آدرس های حمل و نقل و آدرس های صورتحساب basic-card حذف شده است. آدرس صورت‌حساب سایر روش‌های پرداخت (مانند Google Pay) تحت تأثیر قرار نمی‌گیرد.

این تغییر در کروم 74، فایرفاکس و سافاری اعمال شده است.

PaymentRequest.show() اکنون یک detailsPromise اختیاری می گیرد

PaymentRequest.show() به تاجر اجازه می دهد تا قبل از مشخص شدن مجموع نهایی، یک UI درخواست پرداخت ارائه دهد. تاجر ده ثانیه فرصت دارد تا قبل از مهلت زمانی، detailsPromise حل کند. این ویژگی برای یک رفت و برگشت سریع سمت سرور در نظر گرفته شده است.

این ویژگی در Chrome 75 و Safari ارسال شده است.

// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
  return;
}

// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
  // Find out the exact total amount and call
  // `resolveDetailsPromise(details)`.
  // Use a 3 second timeout as an example.
  window.setTimeout(function() {
    resolveDetailsPromise(details);
  }, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);

PaymentRequestEvent.changePaymentMethod()

ویژگی Payment Handler API PaymentRequestEvent.changePaymentMethod() به کنترل کننده های پرداخت (به عنوان مثال، Google Pay) اجازه می دهد تا کنترل کننده رویداد onpaymentmethodchange را فعال کنند. changePaymentMethod() وعده ای را برمی گرداند که به یک پاسخ تاجر با اطلاعات قیمت به روز شده (مثلاً محاسبه مجدد مالیات) حل می شود.

هم PaymentRequestEvent.changePaymentMethod() و هم رویداد paymentmethodchange در Chrome 76 در دسترس هستند و Webkit رویداد paymentmethodchange در پیش‌نمایش فناوری خود پیاده‌سازی کرده است.

// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
  evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
    if (evt.changePaymentMethod === undefined) {
      // Not implemented in this version of Chrome.
      return;
    }
    // Notify merchant that the user selected a different payment method.
    evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
    .then((responseFromMerchant) => {
      if (responseFromMerchant === null) {
        // Merchant ignored the 'paymentmethodchange' event.
        return;
      }
      handleResponseFromMerchant(responseFromMerchant);
    })
    .catch((error) => {
      handleError(error);
    });
  }));
});

مثال تاجر:

if (request.onpaymentmethodchange === undefined) {
  // Feature not available in this browser.
  return;
}

request.addEventListener('paymentmethodchange', (evt) => {
  evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});

توسعه محلی بهبود یافته است

Chrome 76 دو پیشرفت کوچک برای بهره وری توسعه دهندگان اضافه می کند. اگر محیط توسعه محلی شما از گواهی خودامضا شده استفاده می‌کند، اکنون می‌توانید از پرچم خط فرمان --ignore-certificate-errors استفاده کنید تا Chrome APIهای Web Payments را در محیط برنامه‌نویسی خود مجاز کنید. اگر با استفاده از یک وب سرور محلی که از HTTPS پشتیبانی نمی‌کند، توسعه می‌دهید، می‌توانید از پرچم --unsafely-treat-insecure-origin-as-secure=<origin> نیز استفاده کنید تا Chrome مبدا HTTP را به عنوان HTTPS تلقی کند.