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

هنگامی که یک مشتری تصمیم به خرید می‌گیرد، تاجر معامله پرداخت را با ساخت یک شیی 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 را براساس شناسه‌های روش پرداخت انجام می‌دهد. به این ترتیب، مرورگر می‌تواند تعیین کند که برنامه پرداخت به محض اینکه تاجر برای ادامه تراکنش آماده شد، راه‌اندازی شود.

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

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

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);
}

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

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

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

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

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();