بررسی اجمالی API درخواست پرداخت

Eiji Kitamura

وقتی مشتری سعی می‌کند چیزی از وب‌سایت شما خریداری کند، سایت باید از مشتری بخواهد اطلاعات پرداخت و در صورت تمایل، اطلاعات دیگری مانند ترجیحات ارسال را ارائه دهد. شما می‌توانید با استفاده از API درخواست پرداخت (PR API) به سرعت به این هدف دست یابید.

ساختار پرداخت پایه

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

نگاهی به نحوه ساخت و استفاده از هر پارامتر بیندازید.

روش‌های پرداخت

پارامتر اول، paymentMethods ، فهرستی از روش‌های پرداخت پشتیبانی‌شده در یک متغیر آرایه‌ای است. هر عنصر در آرایه شامل دو جزء است: supportedMethods و (اختیاری)، data .

برای supportedMethods ، فروشنده باید یک شناسه روش پرداخت مانند https://bobbucks.dev/pay مشخص کند. وجود و محتوای data به محتوای supportedMethods و طراحی ارائه‌دهنده برنامه پرداخت بستگی دارد.

هر دو بخش اطلاعات باید توسط ارائه‌دهنده‌ی اپلیکیشن پرداخت ارائه شود.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

جزئیات پرداخت

پارامتر دوم، paymentDetails ، به عنوان یک شیء ارسال می‌شود و جزئیات پرداخت برای تراکنش را مشخص می‌کند. این پارامتر شامل مقدار مورد نیاز total است که کل مبلغ قابل پرداخت از مشتری را مشخص می‌کند. این پارامتر همچنین می‌تواند به صورت اختیاری اقلام خریداری شده را فهرست کند.

در مثال زیر، لیست اقلام خریداری شده اختیاری (در این مورد فقط یک قلم کالا) و همچنین مبلغ کل مورد نیاز برای پرداخت نشان داده شده است. در هر دو مورد، واحد پول با هر مبلغ جداگانه مشخص شده است.

const paymentDetails = {
  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' }
  }
};

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

کروم در حین ساخت شیء PaymentRequest بررسی می‌کند که آیا کاربر و محیط برای پرداخت آماده هستند یا خیر.

برای بررسی اینکه آیا کاربر و محیط برای پرداخت آماده هستند یا خیر، قبل از فراخوانی روال پرداخت، تابع canMakePayment() را فراخوانی کنید. فراخوانی canMakePayment() در صورتی true را برمی‌گرداند که مرورگر حداقل از یک روش پرداخت مشخص شده در شیء پشتیبانی کند.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

درباره PaymentRequest.canMakePayment() در MDN بیشتر بدانید

show()

پس از تنظیم دو پارامتر و ایجاد شیء request ، می‌توانید متد show() را فراخوانی کنید که رابط کاربری برنامه پرداخت را نمایش می‌دهد.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

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

در نهایت، می‌توانید رابط کاربری درخواست پرداخت را با تکمیل فرآیند با response.complete('success') یا response.complete('fail') بسته به نتیجه‌ای که PSP برمی‌گرداند، ببندید.

بعدی

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