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

Eiji Kitamura

کروم 62

PaymentDetailsModifier اکنون در دسترس است

در درخواست پرداخت، مواردی وجود دارد که بسته به روش پرداختی که مشتری انتخاب می کند، می خواهید تخفیف یا هزینه اضافی ارائه دهید. PaymentDetailsModifier قابلیتی است که می توانید برای رسیدن به این هدف از آن استفاده کنید.

ویژگی modifiers را به آرگومان دوم سازنده PaymentRequest به همراه آرایه‌ای از شی PaymentDetailsModifier اضافه کنید که قوانینی است که نشان می‌دهد چگونه آیتم‌های نمایشی و کل باید بسته به روش پرداخت انتخابی مشتری اصلاح شوند.

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

let methods = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard']
   supportedTypes: ['credit', 'debit']
 }
}];

let details = {
 displayItems: [{
   label: 'T-shirt',
   amount: { currency: 'USD', value: '68.00' }
 }],
 total: {
   label: 'Total price',
   amount: { currency: 'USD', value: '68.00' }
 },
 modifiers: [{
   supportedMethods: 'basic-card',
   data: {
     supportedTypes: ['credit']
   },
   additionalDisplayItems: [{
     label: 'Processing fee',
     amount: { currency: 'USD', value: '3.00' }
   }],
   total: {
     label: 'Credit card price',
     amount: {currency: ‘USD’, value: ‘71.00’}}
 }]
};

let options = {};

let request = new PaymentRequest(methods, details, options);

در برگه درخواست پرداخت واقعی، به محض انتخاب پرداخت با کارت اعتباری، کاربر آیتم نمایش دیگری به نام "هزینه پردازش" را با هزینه 3 دلار، با قیمت کل 71.00 دلار مشاهده خواهد کرد.

PaymentDetailsModifier شامل پارامترهای زیر است:

وقتی گزینه های حمل و نقل وجود دارد، همه چیز کمی مشکل می شود، زیرا قیمت کل modifiers نمی تواند ثابت باشد و نیاز به اصلاح پویا دارد.

برای دستیابی به این هدف، در هنگام shippingaddresschange و shippingoptionchange ، modifiers additionalDisplayItems و total را تغییر می‌دهید، درست مانند ویژگی displayItems شی PaymentDetails .

ویژگی supportedMethods اکنون یک رشته می گیرد

ویژگی supportedMethods در شی PaymentMethodData (اولین آرگومان سازنده PaymentRequest ) آرایه‌ای از رشته‌ها را می‌گیرد که یک روش پرداخت را نشان می‌دهد. اکنون از یک رشته به عنوان آرگومان استفاده می کند.

توجه داشته باشید که دادن یک آرایه فعلا به کار خود ادامه خواهد داد.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

کروم 61

supportedTypes در کارت پایه موجود است

هنگامی که supportedMethods " basic-card " است، اکنون می توانید supportedTypes برای نشان دادن نوع کارت هایی که از میان " credit "، " debit "، و " prepaid " پشتیبانی می شوند، ارائه دهید.

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

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

کروم 57

PaymentRequest اکنون در داخل iframes در دسترس است

اکنون می‌توان API درخواست پرداخت را از داخل یک iframe با افزودن ویژگی allowpaymentrequest به عنصر iframe فراخوانی کرد.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData از کارت پایه پشتیبانی می کند

اولین آرگومان سازنده PaymentRequest() آرایه ای از داده های روش پرداخت است. قالب PaymentMethodData در این نسخه تغییر یافته است.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

فرمت ویژگی data به مقدار در supportedMethods بستگی دارد و بر اساس مشخصات Basic Card است. توجه داشته باشید که این مشخصات شامل supportedTypes است که credit ، debit یا prepaid را می‌پذیرد، اما Chrome 57 این ویژگی را نادیده می‌گیرد و هر مقداری را در supoprtedNetworks به عنوان کارت اعتباری در نظر می‌گیرد.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

کروم 56

انتظار

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

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

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

requestPayerName

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

نوع حمل و نقل

به‌عنوان بخشی از گزینه حمل و نقل (آگومان سوم برای PaymentRequest )، توسعه‌دهندگان اکنون می‌توانند shippingType اضافه کنند تا درخواست کنند که رابط کاربری به جای «حمل و نقل»، «تحویل» یا «پیکاپ» را نشان دهد. shippingType رشته‌های shipping (پیش‌فرض)، delivery یا pickup می‌پذیرد.

توابع سریالساز موجود برای PaymentResponse و PaymentAddress

شی PaymentResponse و شی PaymentAddress اکنون با JSON قابل سریال‌سازی هستند. توسعه دهندگان می توانند با فراخوانی تابع toJSON() یکی را به یک شی JSON تبدیل کنند و از ایجاد توابع دست و پا گیر toDict() اجتناب کنند.

request.show().then(response => {
     let res = response.toJSON();
});

canMakePayment

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

let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
     request.canMakePayment().then(result => {
       if (result) {
         // Payment methods are available.
       } else {
         // Payment methods are not available, but users can still add
        // a new payment method in Payment UI.
       }
     }).catch(error => {
       // Unable to determine.
     });
}