عمر یک تراکنش پرداخت

بیاموزید که چگونه تاجران برنامه‌های پرداخت را ادغام می‌کنند و چگونه تراکنش‌های پرداخت با API درخواست پرداخت کار می‌کنند.

Eiji Kitamura

Milica Mihajlija

API های پرداخت وب، ویژگی های پرداخت اختصاصی هستند که برای اولین بار در مرورگر تعبیه شده اند. با پرداخت‌های وب، ادغام تاجر با برنامه‌های پرداخت ساده‌تر می‌شود در حالی که تجربه مشتری ساده‌تر و ایمن‌تر می‌شود.

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

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

این فرآیند شامل 6 مرحله است:

1. تاجر یک معامله پرداخت را آغاز می کند.
2. تاجر یک دکمه پرداخت را نشان می دهد.

3. مشتری دکمه پرداخت را فشار می دهد.

   

4. مرورگر برنامه پرداخت را راه اندازی می کند.

   

5. اگر مشتری جزئیاتی را تغییر دهد (مانند گزینه های حمل و نقل یا آدرس آنها)، تاجر جزئیات تراکنش را به روز می کند که منعکس کننده این تغییر است.

   

6. پس از اینکه مشتری خرید را تأیید کرد، تاجر پرداخت را تأیید می کند و معامله را تکمیل می کند.

   

مرحله 1: تاجر یک تراکنش پرداخت را آغاز می کند

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

• روش های پرداخت قابل قبول و داده های آنها برای پردازش تراکنش.
• جزئیات، مانند قیمت کل (الزامی) و اطلاعات مربوط به اقلام.
• گزینه هایی که در آن بازرگانان می توانند اطلاعات حمل و نقل مانند آدرس حمل و نقل و گزینه حمل و نقل را درخواست کنند.
• بازرگانان همچنین می توانند آدرس صورتحساب، نام پرداخت کننده، ایمیل و شماره تلفن را درخواست کنند.
• بازرگانان همچنین می توانند نوع ارسال اختیاری ( shipping , delivery یا pickup ) را در PaymentRequest قرار دهند . برنامه پرداخت می تواند از آن به عنوان راهنمایی برای نمایش برچسب های صحیح در رابط کاربری خود استفاده کند.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

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

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

مرحله 2: تاجر یک دکمه پرداخت را نشان می دهد

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

با استفاده از یک نمونه PaymentRequest ، یک تاجر می‌تواند پرس و جو کند که آیا مشتری برنامه پرداخت را در دسترس دارد یا خیر.

آیا مشتری برنامه پرداخت را در دسترس دارد؟

روش canMakePayment() PaymentRequest در صورتی که یک برنامه پرداخت در دستگاه مشتری موجود باشد، true برمی گرداند. «در دسترس» به این معنی است که یک برنامه پرداخت که از روش پرداخت پشتیبانی می‌کند، کشف می‌شود، و برنامه پرداخت ویژه پلتفرم نصب شده است، یا برنامه پرداخت مبتنی بر وب آماده ثبت است.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

مرحله 3: مشتری دکمه پرداخت را فشار می دهد

هنگامی که مشتری دکمه پرداخت را فشار می‌دهد، تاجر متد show() نمونه PaymentRequest را فراخوانی می‌کند که بلافاصله رابط کاربری پرداخت را راه‌اندازی می‌کند.

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

به تعویق انداختن راه اندازی رابط کاربری پرداخت

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

برای به تعویق انداختن واسط پرداخت، تاجر یک وعده به متد show() می دهد. مرورگر یک نشانگر بارگذاری را نشان می دهد تا زمانی که وعده حل شود و تراکنش آماده شروع شود.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

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

مرحله 4: مرورگر برنامه پرداخت را راه اندازی می کند

مرورگر می‌تواند یک برنامه پرداخت ویژه پلتفرم یا یک برنامه پرداخت مبتنی بر وب را راه‌اندازی کند. (شما می توانید در مورد اینکه چگونه Chrome تعیین می کند کدام برنامه پرداخت راه اندازی شود، اطلاعات بیشتری کسب کنید.)

نحوه ساخت برنامه پرداخت در بیشتر موارد به توسعه‌دهنده بستگی دارد، اما رویدادهای منتشر شده از و به تاجر، و همچنین ساختار داده‌های ارسال شده همراه با آن رویدادها، استاندارد شده‌اند.

هنگامی که برنامه پرداخت راه اندازی می شود، اطلاعات تراکنش ارسال شده به شی PaymentRequest در مرحله 1 را دریافت می کند که شامل موارد زیر است:

• داده های روش پرداخت
• قیمت کل
• گزینه های پرداخت

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

مرحله 5: چگونه یک تاجر می تواند جزئیات تراکنش را بسته به اقدامات مشتری به روز کند

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

چهار نوع رویداد وجود دارد که یک تاجر می تواند دریافت کند:

• رویداد تغییر روش پرداخت
• رویداد تغییر آدرس حمل و نقل
• رویداد تغییر گزینه حمل و نقل
• رویداد تأیید اعتبار تجاری

رویداد تغییر روش پرداخت

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

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

رویداد تغییر آدرس حمل و نقل

یک برنامه پرداخت می تواند به صورت اختیاری آدرس حمل و نقل مشتری را ارائه دهد. این برای مشتریان راحت است زیرا آنها مجبور نیستند هیچ جزئیاتی را به صورت دستی در فرم وارد کنند و می توانند آدرس حمل و نقل خود را به جای چندین وب سایت تجاری مختلف در برنامه های پرداخت ترجیحی خود ذخیره کنند.

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

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

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

رویداد تغییر گزینه حمل و نقل

یک تاجر می تواند چندین گزینه حمل و نقل را به مشتری ارائه دهد و می تواند این انتخاب را به برنامه پرداخت واگذار کند. گزینه های حمل و نقل به عنوان لیستی از قیمت ها و نام خدماتی که مشتری می تواند انتخاب کند نمایش داده می شود. مثلا:

• حمل و نقل استاندارد - رایگان
• حمل و نقل سریع - 5 دلار

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

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

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

رویداد اعتبار سنجی تاجر

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

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

مرحله 6: تاجر پرداخت را تأیید می کند و تراکنش را تکمیل می کند

هنگامی که مشتری با موفقیت پرداخت را تأیید کرد، متد show() یک وعده را برمی‌گرداند که به PaymentResponse حل می‌شود. شی PaymentResponse شامل اطلاعات زیر است:

• جزئیات نتیجه پرداخت
• آدرس حمل و نقل
• گزینه حمل و نقل
• اطلاعات تماس

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

اگر برنامه پرداخت به دلیل عدم موفقیت یا خطا در پرداخت خاتمه یابد، وعده بازگشتی از show() رد می‌شود و مرورگر تراکنش پرداخت را خاتمه می‌دهد.

پردازش و تأیید پرداخت

details در PaymentResponse شی اعتبار پرداخت است که از برنامه پرداخت بازگردانده شده است. تاجر می‌تواند از اعتبار برای پردازش یا تأیید پرداخت استفاده کند. نحوه عملکرد این فرآیند حیاتی به مدیریت پرداخت بستگی دارد.

تکمیل یا تلاش مجدد تراکنش

پس از اینکه تاجر تشخیص داد که آیا معامله موفقیت آمیز بوده یا شکست خورده است، می تواند یکی از موارد زیر را انجام دهد:

• برای تکمیل تراکنش، متد .complete() را فراخوانی کنید و نشانگر بارگذاری را حذف کنید.
• اجازه دهید مشتری با فراخوانی متد retry() دوباره امتحان کند.

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

مراحل بعدی

• نحوه اعلام شناسه روش پرداخت را با جزئیات در تنظیم روش پرداخت بیاموزید.
• در راهنمای برنامه‌نویس برنامه‌های پرداخت Android، نحوه ساختن یک برنامه پرداخت ویژه پلتفرم را بیاموزید.
• با نحوه ساخت یک برنامه پرداخت مبتنی بر وب در راهنمای برنامه‌نویس برنامه‌های پرداخت مبتنی بر وب آشنا شوید.