نحوه عملکرد API درخواست پرداخت

بیاموزید که چگونه API درخواست پرداخت در سطح بالایی کار می کند.

ایجی کیتامورا

API درخواست پرداخت

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

ساختار اساسی

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

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

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

پارامتر اول، PayMethods ، فهرستی از روش های پرداخت پشتیبانی شده در یک متغیر آرایه است. هر عنصر در آرایه شامل دو جزء، 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.
  }
}];

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

پارامتر دوم، PayDetails ، به عنوان یک شی ارسال می شود و جزئیات پرداخت را برای تراکنش مشخص می کند. این شامل مقدار 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' }
  }
};

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

Chrome بررسی می‌کند که آیا کاربر و محیط برای پرداخت در طول ساخت یک شیی 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 ارسال کند.

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

بعدی

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