सुरक्षित पेमेंट की पुष्टि करके पुष्टि करें

Eiji Kitamura

कारोबारी या कंपनियां, किसी क्रेडिट कार्ड या बैंक खाते के लिए, स्ट्रॉन्ग कस्टमर ऑथेंटिकेशन (SCA) प्रोसेस के हिस्से के तौर पर सिक्योर पेमेंट पुष्टि (SPC) का इस्तेमाल कर सकती हैं. WebAuthn, पुष्टि करने की प्रोसेस को पूरा करता है. आम तौर पर, यह बायोमेट्रिक्स की मदद से पुष्टि करता है. WebAuthn को पहले से रजिस्टर करना ज़रूरी है. इस बारे में ज़्यादा जानने के लिए, पेमेंट की पुष्टि करने के लिए सुरक्षित तरीके को रजिस्टर करना लेख पढ़ें.

आम तौर पर, लागू करने का तरीका

एसपीसी का सबसे ज़्यादा इस्तेमाल तब किया जाता है, जब कोई ग्राहक किसी व्यापारी/कंपनी/कारोबारी की साइट पर खरीदारी करता है और क्रेडिट कार्ड जारी करने वाली संस्था या बैंक को पेमेंट करने वाले की पहचान की पुष्टि करनी होती है.

आइए, पुष्टि करने की प्रोसेस के बारे में जानें:

1. कोई ग्राहक, कारोबारी को अपने पेमेंट से जुड़े क्रेडेंशियल (जैसे कि क्रेडिट कार्ड की जानकारी) देता है.
2. अगर पैसे चुकाने वाले व्यक्ति को अलग से पुष्टि करनी है, तो व्यापारी/कंपनी, पेमेंट क्रेडेंशियल जारी करने वाली संस्था या बैंक (भरोसेमंद पक्ष या RP) से पूछती है. उदाहरण के लिए, EMV® 3-D Secure का इस्तेमाल करने पर, यह बदलाव हो सकता है.
   • अगर आरपी चाहता है कि व्यापारी/कंपनी/कारोबारी एसपीसी का इस्तेमाल करे और उपयोगकर्ता ने पहले से रजिस्टर किया हो, तो आरपी, पैसे चुकाने वाले व्यक्ति के रजिस्टर किए गए क्रेडेंशियल आईडी की सूची और चैलेंज के साथ जवाब देता है.
   • अगर पुष्टि करने की ज़रूरत नहीं है, तो कारोबारी या कंपनी, लेन-देन पूरा कर सकती है.
3. अगर पुष्टि करना ज़रूरी है, तो कारोबारी या कंपनी यह तय करती है कि ब्राउज़र पर SPC काम करता है या नहीं.
   • अगर ब्राउज़र पर एसपीसी काम नहीं करता है, तो पुष्टि करने के मौजूदा फ़्लो का इस्तेमाल करें.
4. व्यापारी/कंपनी ने एसपीसी को शुरू किया हो. ब्राउज़र, पुष्टि करने के लिए एक डायलॉग दिखाता है.
   • अगर आरपी से कोई क्रेडेंशियल आईडी नहीं भेजा गया है, तो पुष्टि करने के मौजूदा फ़्लो का इस्तेमाल करें. पुष्टि हो जाने के बाद, आने वाले समय में पुष्टि करने की प्रोसेस को आसान बनाने के लिए, एसपीसी रजिस्ट्रेशन का इस्तेमाल करें.
5. उपयोगकर्ता, डिवाइस को अनलॉक करके रकम और पेमेंट के डेस्टिनेशन की पुष्टि करता है और पुष्टि करता है.
6. पुष्टि करने के बाद, व्यापारी/कंपनी/कारोबारी को एक क्रेडेंशियल मिलता है.
7. आरपी को व्यापारी/कंपनी से क्रेडेंशियल मिलता है और वह उसकी पुष्टि करता है.
8. आरपी, पुष्टि के नतीजे व्यापारी/कंपनी को भेजता है.
9. व्यापारी/कंपनी/कारोबारी, उपयोगकर्ता को एक मैसेज दिखाता है. इससे पता चलता है कि पेमेंट हो गया है या नहीं.

अहम जानकारी: एसपीसी के शुरुआती एक्सपेरिमेंट को तुरंत इस्तेमाल करने के लिए, इस एपीआई को पेमेंट रिक्वेस्ट और पेमेंट हैंडलर एपीआई के मौजूदा वर्शन के आधार पर डिज़ाइन किया गया है. अब पेमेंट के अनुरोध से अलग एसपीसी के डिज़ाइन को एक्सप्लोर करने के लिए, आम तौर पर सहमति बन गई है. हमें उम्मीद है कि SPC, पेमेंट के अनुरोध के मूल स्रोत से हट जाएगा. हालांकि, इसकी कोई खास समयावधि नहीं है. डेवलपर के लिए, इससे सुविधाओं का पता लगाने, उन्हें इस्तेमाल करने, और एपीआई के अन्य पहलुओं को बेहतर बनाने में मदद मिलेगी.

फ़ीचर का पता लगाना

यह पता लगाने के लिए कि ब्राउज़र पर SPC काम करता है या नहीं, canMakePayment() पर एक फ़र्ज़ी कॉल भेजा जा सकता है.

व्यापारी/कंपनी/कारोबारी की वेबसाइट पर एसपीसी का पता लगाने की सुविधा जोड़ने के लिए, नीचे दिया गया कोड कॉपी करके चिपकाएं.

const isSecurePaymentConfirmationSupported = async () => {
  if (!'PaymentRequest' in window) {
    return [false, 'Payment Request API is not supported'];
  }

  try {
    // The data below is the minimum required to create the request and
    // check if a payment can be made.
    const supportedInstruments = [
      {
        supportedMethods: "secure-payment-confirmation",
        data: {
          // RP's hostname as its ID
          rpId: 'rp.example',
          // A dummy credential ID
          credentialIds: [new Uint8Array(1)],
          // A dummy challenge
          challenge: new Uint8Array(1),
          instrument: {
            // Non-empty display name string
            displayName: ' ',
            // Transparent-black pixel.
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==',
          },
          // A dummy merchant origin
          payeeOrigin: 'https://non-existent.example',
        }
      }
    ];

    const details = {
      // Dummy shopping details
      total: {label: 'Total', amount: {currency: 'USD', value: '0'}},
    };

    const request = new PaymentRequest(supportedInstruments, details);
    const canMakePayment = await request.canMakePayment();
    return [canMakePayment, canMakePayment ? '' : 'SPC is not available'];
  } catch (error) {
    console.error(error);
    return [false, error.message];
  }
};

isSecurePaymentConfirmationSupported().then(result => {
  const [isSecurePaymentConfirmationSupported, reason] = result;
  if (isSecurePaymentConfirmationSupported) {
    // Display the payment button that invokes SPC.
  } else {
    // Fallback to the legacy authentication method.
  }
});

उपयोगकर्ता की पुष्टि करना

उपयोगकर्ता की पुष्टि करने के लिए, secure-payment-confirmation और WebAuthn पैरामीटर के साथ PaymentRequest.show() तरीका शुरू करें:

• PublicKeyCredentialRequestOptions
• कारोबारी या कंपनी के प्लैटफ़ॉर्म पर मौजूद, पेमेंट से जुड़े अन्य पैरामीटर.

यहां पेमेंट के तरीके की data प्रॉपर्टी, SecurePaymentConfirmationRequest के लिए दिए जाने वाले पैरामीटर दिए गए हैं.

पैरामीटर	ब्यौरा
rpId	आरपी आईडी के तौर पर आरपी ऑरिजिन का होस्टनेम.
challenge	रीप्ले अटैक को रोकने के लिए, रैंडम चैलेंज.
credentialIds	क्रेडेंशियल आईडी का कलेक्शन. WebAuthn की पुष्टि करने की सुविधा में, allowCredentials प्रॉपर्टी PublicKeyCredentialDescriptor ऑब्जेक्ट की एक कलेक्शन स्वीकार करती है. हालांकि, SPC में सिर्फ़ क्रेडेंशियल आईडी की सूची पास की जाती है.
payeeName (वैकल्पिक)	पैसे पाने वाले का नाम.
payeeOrigin	पैसे पाने वाले का मूल नाम. ऊपर बताई गई स्थिति में, यह कारोबारी या कंपनी का ऑरिजिन है.
instrument	displayName के लिए स्ट्रिंग और icon के लिए एक यूआरएल, जो इमेज संसाधन पर ले जाता है. iconMustBeShown के लिए एक वैकल्पिक बूलियन (डिफ़ॉल्ट रूप से true पर सेट), जो बताता है कि अनुरोध पूरा होने के लिए, आइकॉन को फ़ेच करके दिखाया जाना चाहिए.
timeout	लेन-देन पर हस्ताक्षर करने के लिए मिलीसेकंड में तय की गई समयसीमा
extensions	WebAuthn कॉल में जोड़े गए एक्सटेंशन. आपको "पेमेंट" एक्सटेंशन की जानकारी खुद देने की ज़रूरत नहीं है.

यह उदाहरण कोड देखें:

// After confirming SPC is available on this browser via a feature detection,
// fetch the request options cross-origin from the RP server.
const options = fetchFromServer('https://rp.example/spc-auth-request');
const { credentialIds, challenge } = options;

const request = new PaymentRequest([{
  // Specify `secure-payment-confirmation` as payment method.
  supportedMethods: "secure-payment-confirmation",
  data: {
    // The RP ID
    rpId: 'rp.example',

    // List of credential IDs obtained from the RP server.
    credentialIds,

    // The challenge is also obtained from the RP server.
    challenge,

    // A display name and an icon that represent the payment instrument.
    instrument: {
      displayName: "Fancy Card ****1234",
      icon: "https://rp.example/card-art.png",
      iconMustBeShown: false
    },

    // The origin of the payee (merchant)
    payeeOrigin: "https://merchant.example",

    // The number of milliseconds to timeout.
    timeout: 360000,  // 6 minutes
  }
}], {
  // Payment details.
  total: {
    label: "Total",
    amount: {
      currency: "USD",
      value: "5.00",
    },
  },
});

try {
  const response = await request.show();

  // response.details is a PublicKeyCredential, with a clientDataJSON that
  // contains the transaction data for verification by the issuing bank.
  // Make sure to serialize the binary part of the credential before
  // transferring to the server.
  const result = fetchFromServer('https://rp.example/spc-auth-response', response.details);
  if (result.success) {
    await response.complete('success');
  } else {
    await response.complete('fail');
  }
} catch (err) {
  // SPC cannot be used; merchant should fallback to traditional flows
  console.error(err);
}

.show() फ़ंक्शन का इस्तेमाल करने पर, एक PaymentResponse ऑब्जेक्ट बनता है. हालांकि, details में clientDataJSON के साथ सार्वजनिक पासकोड क्रेडेंशियल होता है. इसमें आरपी की पुष्टि के लिए, ट्रांज़ैक्शन डेटा (payment) होता है.

इस प्रोसेस के बाद मिलने वाले क्रेडेंशियल को आरपी को क्रॉस-ऑरिजिन ट्रांसफ़र किया जाना चाहिए और उसकी पुष्टि की जानी चाहिए.

आरपी, लेन-देन की पुष्टि कैसे करता है

पेमेंट की प्रोसेस में, आरपी सर्वर पर लेन-देन के डेटा की पुष्टि करना सबसे अहम चरण है.

लेन-देन के डेटा की पुष्टि करने के लिए, आरपी, WebAuthn की पुष्टि करने के दावे की पुष्टि करने की प्रोसेस का पालन कर सकता है. इसके अलावा, उन्हें payment की पुष्टि करनी होगी.

clientDataJSON के पेलोड का उदाहरण:

{
  "type":"payment.get",
  "challenge":"SAxYy64IvwWpoqpr8JV1CVLHDNLKXlxbtPv4Xg3cnoc",
  "origin":"https://spc-merchant.glitch.me",
  "crossOrigin":false,
  "payment":{
    "rp":"spc-rp.glitch.me",
    "topOrigin":"https://spc-merchant.glitch.me",
    "payeeOrigin":"https://spc-merchant.glitch.me",
    "total":{
      "value":"15.00",
      "currency":"USD"
    },
    "instrument":{
      "icon":"https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422",
      "displayName":"Fancy Card 825809751248"
    }
  }
}

चेतावनी: type प्रॉपर्टी, public-key के बजाय payment.get का इस्तेमाल करती है. अगर आपको इनमें से किसी एक का इस्तेमाल करना है, तो हो सकता है कि आपको मौजूदा WebAuthn लाइब्रेरी में कुछ बदलाव करने पड़ें.

• rp, आरपी के ऑरिजिन से मेल खाता है.
• topOrigin, उस टॉप-लेवल ऑरिजिन से मेल खाता है जिसकी आरपी को उम्मीद है (ऊपर दिए गए उदाहरण में, कारोबारी/कंपनी का ऑरिजिन).
• payeeOrigin, पैसे पाने वाले व्यक्ति के उस नाम से मेल खाता है जिसे उपयोगकर्ता को दिखाया जाना चाहिए था.
• total, लेन-देन की उस रकम से मेल खाता है जो उपयोगकर्ता को दिखनी चाहिए थी.
• instrument, पेमेंट के उस तरीके की जानकारी से मेल खाता है जिसे उपयोगकर्ता को दिखाया जाना चाहिए.

const clientData = base64url.decode(response.clientDataJSON);
const clientDataJSON = JSON.parse(clientData);

if (!clientDataJSON.payment) {
  throw 'The credential does not contain payment payload.';
}

const payment = clientDataJSON.payment;
if (payment.rp !== expectedRPID ||
    payment.topOrigin !== expectedOrigin ||
    payment.payeeOrigin !== expectedOrigin ||
    payment.total.value !== '15.00' ||
    payment.total.currency !== 'USD') {
  throw 'Malformed payment information.';
}

पुष्टि की सभी शर्तें पूरी होने के बाद, आरपी, कारोबारी को बता सकता है कि लेन-देन पूरा हो गया है.

अगले चरण

• पेमेंट की सुरक्षित पुष्टि की खास जानकारी पढ़ें
• पेमेंट की पुष्टि करने के लिए सुरक्षित तरीके के बारे में जानें