با Google Pay یک تجربه پرداخت سریع در وب ایجاد کنید

Google Pay API به کاربران این فرصت را می دهد که با استفاده از اطلاعات پرداخت ذخیره شده در حساب های Google خود، در همه جا پرداخت کنند. در این آزمایشگاه، از کتابخانه مشتری Google Pay برای وب استفاده می‌کنید تا با ایجاد تجربه‌ای سریع‌تر، راحت‌تر و ایمن‌تر، تجربه پرداخت یک فروشگاه آنلاین ساده‌شده را بهبود ببخشید، که به نوبه خود منجر به تبدیل‌های بیشتر و مشتریان راضی‌تر می‌شود.

Auto T-Shirt Shop فروشگاهی نوآورانه است که از آخرین پیشرفت‌های هوش مصنوعی بهره می‌برد و از اطلاعاتی مانند ترجیحات سبک، آب و هوا، زمان سال و روند مد استفاده می‌کند تا مناسب‌ترین کالا را برای خرید به شما پیشنهاد دهد.

معیارهای تعامل برای این فروشگاه از طریق سقف است. متأسفانه، معیارها همچنین تعداد زیادی از رها شدن در فرآیند پرداخت را منعکس می کنند. یکی از صاحبان پروژه که مصمم به مقابله با آن است، به یاد می‌آورد که ویدئویی را دیده است که نتایج امیدوارکننده‌ای را که Google Pay برای سایت‌های مشابه به دست آورده است ، نشان می‌دهد، بنابراین تصمیم می‌گیرند آن را انجام دهند و به شما اعتماد کنند تا از یکپارچگی مراقبت کنید.

آنچه خواهید ساخت

این لبه کد شما را در ادغام Google Pay در یک سایت موجود راهنمایی می‌کند، از جمله تعیین اینکه آیا کاربر می‌تواند با استفاده از روش پرداخت پشتیبانی شده توسط Google Pay پرداخت کند، قرار دادن و طراحی دکمه پرداخت، و اجرای تراکنش.

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

  • نحوه ادغام Google Pay در صفحه پرداخت موجود
  • چگونه از بین روش های پرداخت ترجیحی خود انتخاب کنید
  • نحوه تشخیص اینکه آیا کاربر آماده پرداخت با Google Pay است یا خیر

آنچه شما نیاز خواهید داشت

  • یک کامپیوتر با دسترسی به اینترنت
  • دانش پایه جاوا اسکریپت

سایت نمونه را در glitch.com اجرا کنید

به منظور راه اندازی و اجرا در سریع ترین زمان ممکن، این Codelab در glitch.com در دسترس قرار گرفته است. Glitch یک محیط رایگان مبتنی بر وب است که یک ویرایشگر کد و ویژگی های میزبانی و استقرار را ارائه می دهد که می توانید از آنها برای ساخت و ارائه برنامه های کاربردی وب استفاده کنید.

برای شروع، از دکمه زیر برای ارائه یک محیط توسعه جدید در Glitch که قبلاً با یک کپی از این Codelab راه اندازی شده است، استفاده کنید.

محیط توسعه را در Glitch.com شروع کنید

از اینجا به بعد، می توانید از ویرایشگر کد در Glitch برای اصلاح فایل های خود استفاده کنید. با استفاده از منوی نمایش در بالا، سرویس برنامه خود را شروع کنید و در پنجره جدید را انتخاب کنید.

سایت نمونه را مرور کنید

همانطور که می بینید، مخزن دارای ساختار فایل بدون پیچیدگی است. هدف اصلی این نرم افزار کد این است که به شما این توانایی را بدهد که این ادغام را با برنامه های فعلی و آینده خود، مستقل از چارچوب، کتابخانه ها یا ابزارهایی که برای کار با آنها انتخاب می کنید، تطبیق دهید.

سایت را کاوش کنید

این بازار آزمایشی به گونه‌ای ساخته شده است که قبل از اینکه وسیله‌ای برای خرید اضافه کنید، فروتنانه شبیه ظاهر برنامه موجود یا بالقوه شما در امروز باشد. در واقع، با وجود اینکه توصیه می‌کنیم در بالای این برنامه آزمایشی کار کنید، می‌توانید از این نرم‌افزار برای ادغام Google Pay در برنامه‌های موجود خود استفاده کنید.

اکنون، اگر قبلاً این کار را نکرده اید، سایت دمو را همانطور که در حال حاضر وجود دارد باز کنید. برای انجام این کار، اگر از Glitch استفاده می کنید، روی دکمه Show کلیک کنید یا URL را که سرور وب محلی شما در آن اجرا می شود باز کنید.

سایت دمو چیز عجیبی نیست، درست است؟ صفحه جزئیات محصول با تصویر، قیمت، توضیحات، چند انتخابگر و دکمه ای که شما را به فرم پرداخت خیالی و معمولی می برد.

هدف این آزمایشگاه جایگزینی این جریان با تجربه دو کلیکی است که توسط Google Pay ارائه شده است.

بیایید این را برنامه ریزی کنیم!

برای درک بهتر این ادغام، این فرآیند به مراحل اساسی زیر تقسیم می شود:

  1. کتابخانه را بارگیری کنید
  2. توانایی پرداخت با Google Pay را تعیین کنید
  3. دکمه پرداخت با Google Pay را نشان دهید
  4. درخواست پرداخت را ایجاد و ارسال کنید
  5. نتایج را جمع آوری کنید

تگ script را اضافه کنید

اولین کاری که برای شروع استفاده از Google Pay API باید انجام دهید، بارگیری کتابخانه جاوا اسکریپت است. برای انجام این کار، یک تگ script را در فایل HTML از جایی که می‌خواهید API را فراخوانی کنید، اضافه کنید، از جمله یک ویژگی src که به کتابخانه خارجی جاوا اسکریپت اشاره می‌کند.

برای این کد لبه، فایل index.html را باز کنید. باید ببینید که تگ اسکریپت قبلاً برای شما درج شده است:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

علاوه بر src ، دو ویژگی دیگر نیز اضافه کرده‌اید.

  • async اجازه می دهد تا اسکریپت شما به صورت ناهمزمان در کنار بقیه صفحه بارگیری و اجرا شود، به طوری که زمان بارگذاری اول سند شما تحت تأثیر قرار نگیرد.
  • onload به شما کمک می کند تا اجرای کدهای وابسته به این کتابخانه را تا بارگذاری اسکریپت به تعویق بیندازید. پس از انجام این کار، تابعی که در این ویژگی مشخص کرده اید اجرا می شود. در این مورد، تابع در onGooglePayLoaded است.

سرویس گیرنده API را نمونه سازی کنید

هنگامی که اسکریپت شما بارگیری شد، همه چیز برای شروع استفاده از این کتابخانه تنظیم شده است. با نمونه سازی شی مشتری شروع کنید، که بعداً از آن برای برقراری تماس با Google Pay API استفاده خواهید کرد.

فایل index.js را که قبلاً بخشی از ساختار فایل در این پروژه است ویرایش کنید. تابع onGooglePayLoaded را با کد زیر جایگزین کنید.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

مشتری پرداخت با یک شی PaymentOptions مقداردهی اولیه می شود. تنظیم environment روی TEST به شما امکان می دهد اطلاعات پرداخت ساختگی را در کل ادغام آزمایش کنید. هنگامی که آماده ایجاد عملیاتی هستید که از تراکنش های واقعی پشتیبانی می کند، می توانید ویژگی environment را به PRODUCTION به روز کنید.

بررسی اجمالی

اکنون کتابخانه سرویس گیرنده جاوا اسکریپت Google Pay API را بارگیری کرده ایم. اکنون، اجازه دهید آن را طوری پیکربندی کنیم که برای ما تماس های API برقرار کند.

تمام تغییرات کد زیر برای بقیه قسمت های کد لبه، در فایل index.js انجام می شود.

اسکلت

هر بار که با Google Pay API ارتباط برقرار می‌کنید، تعدادی پارامتر پیکربندی وجود دارد که باید در درخواست‌های خود بگنجانید، مانند نسخه API مورد نظرتان. برای اهداف این کد، این شیء همچنین حاوی اطلاعاتی در مورد روش های پرداخت پذیرفته شده در برنامه شما است. ساختار نهایی به شکل زیر است:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

ویژگی allowedPaymentMethods فهرستی از روش‌های پرداخت را می‌گیرد. برای هر روش پرداخت، باید ویژگی های زیر را لحاظ کنید:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

برای تعیین اینکه آیا کاربر مورد نظر قادر به پرداخت با Google Pay است، فقط type ویژگی و parameters مورد نیاز است.

پیکربندی روش پرداخت

در این مثال، شما فقط یک پیکربندی را می‌پذیرید که امکان پرداخت کارت برای Mastercard و Visa را می‌دهد، هر دو به شکل شماره حساب رمزگذاری‌شده و اولیه ( PAN ).

پیکربندی شما باید در index.js به این صورت تنظیم شود:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

همه اش را بگذار کنار هم

بیایید خلاصه کنیم.

شما یک روش پرداخت را برای پذیرفته شدن در وب سایت خود تعریف کرده اید و قرار است با نسخه 2.0 API کار کنید. پیکربندی حاصل باید به این صورت باشد:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

اکنون که پیکربندی پایه خود را آماده کرده اید، بیایید به قسمت سرگرم کننده آن برویم.

یکی از اهداف اصلی Google Pay ارائه تجربه پرداخت سریعتر و راحت تر به کاربران شما است. این نه تنها برای موقعیت‌هایی اعمال می‌شود که در آن شخص می‌تواند از Google Pay استفاده کند، بلکه در شرایطی که قادر به انجام این کار نیست نیز اعمال می‌شود. استفاده از درخواست isReadyToPay به شما امکان می دهد آمادگی پرداخت با Google Pay را تعیین کنید و فرصتی را برای شما فراهم می کند تا تجربه سایت خود را مطابق با آن تغییر دهید.

آیا کاربر شما می‌تواند با Google Pay پرداخت کند؟

اولین کاری که باید انجام دهید این است که بررسی کنید آیا کاربر خاصی که قصد پرداخت در سایت شما را دارد می تواند از Google Pay برای انجام این کار استفاده کند یا خیر. این درخواست از شما می‌خواهد که نسخه Google Pay API و روش‌های پرداخت مجاز را برای سایت خود مشخص کنید. این دقیقاً همان چیزی است که شیء پیکربندی پایه تعریف شده در مرحله قبل شامل می شود.

در index.js در داخل تابع onGooglePayLoaded() ، موارد زیر را قرار دهید:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

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

از طرف دیگر، در صورت موفقیت آمیز بودن پاسخ، اکنون آماده هستید که به کاربران خود اجازه دهید از Google Pay بهره مند شوند و بنابراین، می توانید ادامه دهید و دکمه ای برای شروع فرآیند پرداخت در فعال سازی کاربر اضافه کنید (به عنوان مثال، دکمه کلیک).

دکمه ای برای پرداخت با Google Pay اضافه کنید

حتی اگر می‌توانید از هر دکمه‌ای که از دستورالعمل‌های برند Google Pay پیروی می‌کند برای شروع فرآیند پرداخت استفاده کنید، توصیه می‌کنیم با استفاده از API Google Pay یکی را ایجاد کنید. به این ترتیب، نه تنها استفاده دقیق از دستورالعمل‌های برند را تضمین می‌کنید، بلکه از پیشرفت‌های دیگری که مستقیماً در دکمه تعبیه شده است، مانند بومی‌سازی نیز بهره می‌برید.

برای ایجاد یک دکمه، از متد createButton در شی PaymentsClient ، از جمله ButtonOptions برای پیکربندی دکمه استفاده کنید.

در index.js داخل createAndAddButton() ، موارد زیر را قرار دهید:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

تنها ویژگی مورد نیاز هنگام استفاده از createButton ، onClick است، که برای تعیین شیء یا تابع callback برای فعال کردن هر بار که کاربران شما دکمه را فعال می کنند، ضروری است. buttonColor و buttonType به شما این امکان را می دهد که ظاهر دکمه خود را سفارشی کنید. آنها را بر اساس موضوع و الزامات UI برنامه خود تنظیم کنید.

پس از ایجاد دکمه، تنها کاری که باید انجام دهید این است که آن را به یک گره مناسب در DOM اضافه کنید. در این مثال، یک گره div که با buy-now شناسایی شده است برای این منظور استفاده شده است.

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

درخواست پرداخت را آماده کنید

در این مرحله، API Google Pay را بارگیری کرده‌اید و تشخیص داده‌اید که کاربر سایت شما می‌تواند از Google Pay برای پرداخت استفاده کند. در نتیجه، دکمه پرداخت Google Pay را در رابط کاربری نشان داده‌اید و اکنون کاربر شما آماده است تا تراکنش را آغاز کند. اکنون زمان بارگیری برگه پرداخت نهایی است که حاوی اشکال پرداخت موجود برای کاربران مختلف وارد شده است.

درست مانند آنچه قبلاً انجام دادید، در هنگام تعریف درخواست isReadyToPay ، این فراخوانی همچنین به ویژگی‌های موجود در پیکربندی پایه که قبلاً تعریف شده بود ( apiVersion ، apiVersionMinor و allowedPaymentMethods ) علاوه بر برخی ویژگی‌های جدید، نیاز دارد. این بار، یک ویژگی جدید، tokenizationSpecification و parameters اضافی در روش‌های پرداخت شما وجود دارد که با هدف این درخواست مرتبط هستند. علاوه بر این، transactionInfo و merchantInfo باید اضافه شوند.

اطلاعات مورد نیاز اضافی را در روش های پرداخت خود لحاظ کنید

با ایجاد یک کپی از روش پرداخت کارت پایه که قبلا استفاده شده است، شروع کنید. این روش پرداخت کارتی اکنون به ویژگی tokenizationSpecification نیاز دارد تا نحوه رسیدگی به داده‌های مربوط به روش پرداخت انتخاب شده و همچنین نیازهای داده‌ای بیشتر مورد نیاز برای تراکنش واقعی را تعریف کند: در این مثال، آدرس صورت‌حساب کامل و شماره تلفن.

ویژگی tokenizationSpecification

مشخصات توکنیزاسیون تعیین می کند که روش پرداخت انتخاب شده توسط مشتریان شما چگونه مورد استفاده قرار می گیرد و برای تکمیل تراکنش استفاده می شود.

دو نوع مختلف از استراتژی های مدیریت پشتیبانی وجود دارد. اگر تراکنش پرداخت را از داخل سرورهای سازگار PCI DSS خود پردازش می کنید، از نوع مشخصات DIRECT استفاده کنید. در این مثال، شما از یک درگاه پرداخت برای پردازش پرداخت استفاده می‌کنید، بنابراین، نوع مشخصات PAYMENT_GATEWAY را تنظیم می‌کنید.

در index.js در تابع onGooglePaymentsButtonClicked() ، موارد زیر را قرار دهید:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

در بخش parameters ، می‌توانید دروازه‌ای را از فهرست ارائه‌دهندگان پشتیبانی شده توسط Google Pay API به همراه پیکربندی اضافی مورد نیاز هر دروازه مشخص کنید. برای اهداف این آزمایشگاه، استفاده از دروازه example ، که نتایج آزمایش را برای تراکنش های انجام شده به دست می دهد، کافی است.

پارامترهای اضافی

به طور مشابه، اکنون می توانید جزئیات بیشتری در مورد اطلاعاتی که برای انجام موفقیت آمیز تراکنش باید درخواست کنید، ارائه دهید. ببینید چگونه در این مثال، باید ویژگی‌های billingAddressRequired و billingAddressParameters را اضافه کنید تا نشان دهید که برای این تراکنش آدرس صورت‌حساب کاربر در قالب کامل، از جمله شماره تلفن مورد نیاز است.

در index.js در تابع onGooglePaymentsButtonClicked() ، موارد زیر را قرار دهید:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

افزودن اطلاعات مربوط به معامله

ویژگی transactionInfo حاوی یک شی با جزئیات مالی درباره تراکنش است، یعنی قیمت و کد ارز (فرمت آلفا ISO 4217 ) به همراه وضعیت قیمت ، که بسته به ماهیت تراکنش می تواند نهایی یا تخمین زده شود (به عنوان مثال ، قیمت ممکن است بسته به آدرس حمل و نقل مشخص شده متفاوت باشد).

در index.js در تابع onGooglePaymentsButtonClicked() ، موارد زیر را قرار دهید:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

افزودن اطلاعات در مورد بازرگان

درخواست پرداخت اطلاعات مربوط به تاجری را که درخواست را تحت خاصیت merchantInfo انجام می دهد، دریافت می کند. در این کد لبه روی دو مورد از آنها تمرکز خواهید کرد:

  • merchantId انتظار دارد که شناسه مرتبط با حساب شما به محض اینکه سایت شما برای فعالیت در تولید توسط Google تأیید شود. توجه داشته باشید که در هنگام استفاده از محیط TEST ارزیابی نمی شود.
  • merchantName یک نام قابل مشاهده توسط کاربر سایت یا سازمان شما است. ممکن است این مورد در صفحه پرداخت Google Pay نشان داده شود تا اطلاعات بیشتری در مورد اینکه چه کسی این عملیات را درخواست می‌کند در اختیار کاربران قرار دهد.

در index.js در تابع onGooglePaymentsButtonClicked() ، موارد زیر را قرار دهید:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

اطلاعات پرداخت را درخواست کنید و نتیجه را پردازش کنید

اکنون، پیکربندی تعریف شده قبلی را در شیء نهایی paymentDataRequest ادغام کنید.

در index.js در تابع onGooglePaymentsButtonClicked() ، موارد زیر را قرار دهید:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

در این مرحله، همه چیزهایی را که برای درخواست از Google Pay API نیاز دارید در اختیار دارید. برای انجام این کار، از متد loadPaymentData در شی PaymentsClient استفاده کنید، و در پیکربندی که به تازگی تعریف کرده اید، استفاده کنید.

در index.js در تابع onGooglePaymentsButtonClicked() ، موارد زیر را قرار دهید:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

فراخوانی روش loadPaymentData باعث ارائه برگه پرداخت Google Pay می شود. اگر هیچ خطایی در پیکربندی وجود نداشته باشد، می‌توانید فهرستی از روش‌های پرداخت معتبر مرتبط با حساب کاربری که در حال حاضر وارد شده‌اید را مشاهده کنید.

پس از انتخاب، برگه بسته می‌شود و Promise با یک شی PaymentData شامل اطلاعات مربوطه در مورد روش پرداخت انتخاب شده انجام می‌شود:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

اکنون می توانید از این اطلاعات روش پرداخت برای انجام تراکنش واقعی استفاده کنید.

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

تا کنون، تراکنش هایی با مبالغ پرداخت ثابت را بررسی کرده ایم. اما فرض کنید که می خواهید قیمت را بر اساس انتخاب برخی از خواص معامله (مثلاً جزئیات حمل و نقل) به روز کنید. شما می توانید با ارائه پارامتر paymentDataCallback هنگام ساخت کلاینت به این مهم دست یابید. این تماس برگشتی برای مدیریت تغییرات در تراکنش و اعمال تغییرات بر این اساس استفاده می شود. می‌توانید به تغییرات نشانی ارسال، گزینه ارسال و روش پرداخت انتخاب شده گوش دهید. در این مثال، می‌خواهید تغییراتی را در گزینه ارسال انتخاب شده گوش دهید. ابتدا متغیرهای حاوی تمام اطلاعات حمل و نقل را تعریف کنید و paymentDataRequest را تغییر دهید تا شامل آنها شود:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

در مرحله بعد، ایجاد googlePayClient را تغییر می‌دهید تا شامل paymentDataCallback شود، که هر زمان که اصلاحی در callbackIntents در عملیات پرداخت انجام شود، فراخوانی می‌شود. این فراخوانی شامل یک شی با ویژگی های تغییر یافته است. می توانید از این تغییرات برای ایجاد یک تراکنش پرداخت به روز استفاده کنید:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

پس از بازگشت این شی جدید در تماس برگشتی، اطلاعات ارائه شده در برگه پرداخت به روز می شود تا تغییرات انجام شده در تراکنش را منعکس کند.

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

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

این روش همان ورودی loadPaymentData را انتظار دارد. یعنی می توانید از همان آبجکت paymentDataRequest که قبلا تعریف شده بود استفاده کنید. اکنون، تنها کاری که باید انجام دهید این است که به محض اینکه تشخیص دادید کاربر می‌تواند از Google Pay استفاده کند، پس از بازگشت موفقیت‌آمیز isReadyToPay ، یک تماس با روش واکشی اولیه قرار دهید:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

دقیقاً به همین ترتیب، قبل از اینکه کاربر روی دکمه کلیک کند، با واکشی اولیه داده های پرداخت، زمان بارگذاری را کاهش داده اید. بهبود پاسخگویی سایت شما باید نرخ تبدیل شما را بهبود بخشد.

شما با موفقیت Google Pay API را در سایت نمونه موجود در این نرم افزار کد یا برنامه کاربردی خود ادغام کرده اید.

اکنون، برای وارد کردن آن به مرحله تولید، فراموش نکنید که به چک لیست یکپارچه سازی نگاهی بیندازید. پس از تکمیل و بازبینی، یک شناسه فروشنده دریافت خواهید کرد تا به پیکربندی مشتری خود اضافه کنید. به طور مشابه، اگر قصد دارید از یک پردازشگر پرداخت شخص ثالث یا دروازه استفاده کنید (یا در حال استفاده از آن هستید)، فهرست ارائه دهندگان پشتیبانی شده در Google Pay را بررسی کرده و خدمات خود را پیکربندی کنید. اگر مستقیماً با Google Pay ادغام می‌شوید، به بخش مستندات مربوط به این موضوع نگاهی بیندازید.

آنچه را پوشش داده ایم

  • Google API را در سایت خود وارد و پیکربندی کنید.
  • پشتیبانی از API را تعیین کنید و مطابق با آن واکنش نشان دهید.
  • دکمه ای اضافه کنید تا کاربران بتوانند با استفاده از Google Pay پرداخت کنند.
  • اطلاعات پرداخت کاربر قبلاً ذخیره شده را بارگیری و پردازش کنید.
  • با واکشی اولیه اطلاعات پرداخت، زمان بارگذاری را بهینه کنید.

مراحل بعدی

  • درباره Google Pay بیشتر بدانید.
  • چک لیست ادغام را مرور کنید و یک شناسه فروشنده دریافت کنید.
  • به دو نوع مختلف ادغام نگاه کنید و تصمیم بگیرید که چه چیزی برای شما مناسب تر است: ادغام مستقیم یا استفاده از درگاه پرداخت یا پردازنده.
  • برای شروع فرآیند پرداخت و تأیید وضعیت مجوز پرداخت، « Authorize Payments » را تنظیم کنید. (تأیید یا رد کردن)

بیشتر بدانید

آیا به کارتان آمد؟

بسیار مفید! به اندازه کافی برای برآورده کردن انتظارات. نه واقعا.

آیا می‌خواهید کدهای دیگری را مشاهده کنید تا در سایر انواع ادغام (اندروید، ادغام مستقیم، APIهای وفاداری) به شما کمک کنند؟

بله خواهش می کنم، این عالی خواهد بود! از چیزی که به دست آوردم خوشحالم.