[REFACTORE] : Connector Metadata,ApplePay and GooglePay

[JeevaRamu0104]

Feature Description

Current WASM structure for the ApplePay,GooglePay and MetaData was not extendable for the additional fields.

In the case of ApplePay, all user input field changes are happening for session_token_data. With the current structure, all fields are considered text inputs. If we want to show a select box or toggle field, the connector team needs to reach out to the dashboard team for the respective changes. To avoid this dependency, the connector team will now be able to add different fields based on requirements themselves.

One such example is merchant_business_country, where the input field needs to be a select box. However, due to the current structure, the connector team is not able to add the field and needs to inform the dashboard team for the update.

In the case of GooglePay, the request structure is a bit complicated, as the user only needs to enter merchant_id, merchant_name, and gateway_merchant_id, while the rest of the data remains constant. Previously, the idea was to send these fields to WebAssembly (WASM) and construct the request there, but this created more complications in both the frontend and backend. Therefore, we decided to construct the request on the frontend itself and fetch only the input fields from WASM.

Metadata fields also have the same issue as merchant_business_country, where only text input fields are accepted with the current structure. To add a toggle or select field, the connector team needs to reach out to the dashboard team for the changes. With the modified structure, this dependency is resolved.

When does the dependency comes?
For ApplePay, current changes are happening at session_token_data. When changes need to happen at a different level, for example, if a merchant wants to change the supported_networks themselves, which is under payment_request_data, a dependency arises. They need to inform the dashboard team, which will then map the name of the field. Similar for googlePay and metadata fields.

Modified WASM structure for ApplePay,GooglePay and MetaData

[[adyen.metadata.apple_pay_v2]]
name="certificate"
label="Merchant Certificate (Base64 Encoded)"
placeholder="Enter Merchant Certificate (Base64 Encoded)"
required=true
type="Text"
[[adyen.metadata.apple_pay_v2]]
name="certificate_keys"
label="Merchant PrivateKey (Base64 Encoded)"
placeholder="Enter Merchant PrivateKey (Base64 Encoded)"
required=true
type="Text"
[[adyen.metadata.apple_pay_v2]]
name="merchant_identifier"
label="Apple Merchant Identifier"
placeholder="Enter Apple Merchant Identifier"
required=true
type="Text"
[[adyen.metadata.apple_pay_v2]]
name="display_name"
label="Display Name"
placeholder="Enter Display Name"
required=true
type="Text"
[[adyen.metadata.apple_pay_v2]]
name="initiative"
label="Domain"
placeholder="Enter Domain"
required=true
type="Text"
[[adyen.metadata.apple_pay_v2]]
name="initiative_context"
label="Domain Name"
placeholder="Enter Domain Name"
required=true
type="Text"
[[adyen.metadata.apple_pay_v2]]
name="merchant_business_country"
label="Merchant Business Country"
placeholder="Enter Merchant Business Country"
required=true
type="Select"
options=[]
[[adyen.metadata.apple_pay_v2]]
name="payment_processing_details_at"
label="Payment Processing Details At"
placeholder="Enter Payment Processing Details At"
required=true
type="Radio"
options=["Connector","Hyperswitch"]

[[adyen.metadata.google_pay]]
name="merchant_name"
label="Google Pay Merchant Name"
placeholder="Enter Google Pay Merchant Name"
required=true
type="Text"
[[adyen.metadata.google_pay]]
name="merchant_id"
label="Google Pay Merchant Id"
placeholder="Enter Google Pay Merchant Id"
required=true
type="Text"
[[adyen.metadata.google_pay]]
name="gateway_merchant_id"
label="Google Pay Merchant Key"
placeholder="Enter Google Pay Merchant Key"
required=true
type="Text"

[adyen.metadata.endpoint_prefix]
name="endpoint_prefix"
label="Live endpoint prefix"
placeholder="Enter Live endpoint prefix"
required=true
type="Text"

Current WASM structure for ApplePay,GooglePay and MetaData

[adyen.metadata.apple_pay.session_token_data]
certificate="Merchant Certificate (Base64 Encoded)"
certificate_keys="Merchant PrivateKey (Base64 Encoded)"
merchant_identifier="Apple Merchant Identifier"
display_name="Display Name"
initiative="Domain"
initiative_context="Domain Name"
payment_processing_details_at="Connector"
[adyen.metadata.apple_pay.payment_request_data]
supported_networks=["visa","masterCard","amex","discover"]
merchant_capabilities=["supports3DS"]
label="apple"

[adyen.metadata.google_pay]
merchant_name="Google Pay Merchant Name"
gateway_merchant_id="Google Pay Merchant Key"
merchant_id="Google Pay Merchant ID"

[adyen.metadata]
endpoint_prefix="Live endpoint prefix"

Apple Pay Request Structure for Manual

    "apple_pay_combined": {
      "manual": {
        "session_token_data": {
          "initiative": "xxxxxxxx-initiative",
          "certificate": "xxxxxx-certificate",
          "display_name": "xxxxxx-display_name",
          "certificate_keys": "xxxxxx-certificate_keys",
          "initiative_context": "xxxxxx-initiative_context",
          "merchant_identifier": "xxxxxx-merchant_identifier",
          "merchant_business_country": "LV",
          "payment_processing_details_at": "Hyperswitch",
          "payment_processing_certificate": "xxxxxx-payment_processing_certificate",
          "payment_processing_certificate_key": "xxxxxx-payment_processing_certificate_key"
        },
        "payment_request_data": {
          "label": "apple",
          "supported_networks": [
            "visa",
            "masterCard",
            "amex",
            "discover"
          ],
          "merchant_capabilities": [
            "supports3DS"
          ]
        }
      }
    }

Apple Pay Request Structure for Simplified

    "apple_pay_combined": {
      "simplified": {
        "session_token_data": {
          "initiative_context": "https://google.com",
          "merchant_business_country": "DE"
        },
        "payment_request_data": {
          "label": "apple",
          "supported_networks": [
            "visa",
            "masterCard",
            "amex",
            "discover"
          ],
          "merchant_capabilities": [
            "supports3DS"
          ]
        }
      }
    }

GooglePay Request Structure

    "google_pay": {
      "merchant_info": {
        "merchant_id": "xxxx-merchant_id",
        "merchant_name": "xxxx-merchant_name"
      },
      "allowed_payment_methods": [
        {
          "type": "CARD",
          "parameters": {
            "allowed_auth_methods": [
              "PAN_ONLY",
              "CRYPTOGRAM_3DS"
            ],
            "allowed_card_networks": [
              "AMEX",
              "DISCOVER",
              "INTERAC",
              "JCB",
              "MASTERCARD",
              "VISA"
            ]
          },
          "tokenization_specification": {
            "type": "PAYMENT_GATEWAY",
            "parameters": {
              "gateway": "adyen",
              "gateway_merchant_id": "xxxx-gateway_merchant_id"
            }
          }
        }
      ]
    }

List of Apple Pay and GooglePay Connectors

1. adyen
2. authorizedotnet
3. bankofamerica
4. bluesnap
5. checkout
6. cybersource
7. nmi
8. noon
9. nuvei
10. stripe
11. trustpay
12. worldpay
13. zen

Testing command

["adyen","authorizedotnet","bankofamerica","bluesnap","checkout","cybersource","nmi","noon","nuvei","stripe","trustpay","worldpay","zen"].forEach(ele=>{

    console.log(ele,window.getConnectorConfig(ele).metadata)
})

List of Apple Pay Connectors

1. nexinets
2. rapyd

Testing command

["nexinets","rapyd"].forEach(ele=>{

    console.log(ele,window.getConnectorConfig(ele).metadata)
})

List of Google Pay Connectors

1. airwallex
2. globalpay
3. multisafepay
4. payu

Testing command

["airwallex","globalpay","multisafepay","payu"].forEach(ele=>{

    console.log(ele,window.getConnectorConfig(ele).metadata)
})

List of metadata field changes

1. merchant_config_currency (braintree)
2. merchant_account_id (braintree)
3. account_name (globalpay)
4. terminal_id (fiserv)
5. merchant_id (bluesnap)
6. endpoint_prefix (adyen,adyen_payout,netcetera)
7. mcc (threedssecurio,netcetera)
8. merchant_country_code (threedssecurio,netcetera)
9. merchant_name (threedssecurio,netcetera)
10. acquirer_bin (checkout,cybersource,nmi)
11. acquirer_merchant_id (checkout,cybersource,nmi)
12. acquirer_country_code (checkout,cybersource,nmi)
13. three_ds_requestor_name (netcetera)
14. three_ds_requestor_id (netcetera)
15. pull_mechanism_for_external_3ds_enabled (threedssecurio)
16. klarna_region (klarna)
17. source_balance_account (adyenplatform_payout)
18. brand_id (mifinity)

Production Connectors to Test Apple Pay And GooglePay

1. adyen
2. authorizedotnet
3. bluesnap
4. bankofamerica
5. checkout
6. cybersource
7. nexinets (has only applePay)
8. rapyd (has only applePay)
9. stripe
10. trustpay
11. worldpay
12. payu (has only googlePay)
13. zen
14. globalpay (has only googlePay)

["adyen","authorizedotnet","bluesnap","bankofamerica","checkout","cybersource","nexinets","rapyd","stripe","trustpay","worldpay","payu","zen","globalpay"].forEach(ele=>{

    console.log(ele,window.getConnectorConfig(ele).metadata)
})

Production Metadata

1. merchant_config_currency (braintree)
2. merchant_account_id (braintree)
3. account_name (globalpay)
4. terminal_id (fiserv)
5. merchant_id (bluesnap)
6. endpoint_prefix (adyen)
7. klarna_region (klarna)
8. brand_id (mifinity)

Examples to consider klarna_region

Possible Implementation

Updated the wasm structure

Have you spent some time checking if this feature request has been raised before?

• I checked and didn't find a similar issue

Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to submit a PR?

None