### Install @fluidpay/walletjs using npm Source: https://github.com/fluidpay/walletjs/blob/master/README.md This command installs the @fluidpay/walletjs library using npm. It is a prerequisite for using the library in your project. ```console npm install @fluidpay/walletjs ``` -------------------------------- ### GooglePay HTML Integration Example - Wallet.js Source: https://context7.com/fluidpay/walletjs/llms.txt Provides a complete HTML structure for integrating the Google Pay button using Wallet.js. It includes the necessary script tag for the library and a div element where the button will be rendered. The script initializes GooglePay with configuration and handles the payment processing callback. ```html

``` -------------------------------- ### Apple Pay HTML Integration with WalletJS Source: https://context7.com/fluidpay/walletjs/llms.txt Provides an example of integrating Apple Pay directly into an HTML file using a script tag for the WalletJS library. It shows how to initialize the ApplePay class and trigger the payment process via a button click, sending the resulting token to a backend endpoint. ```html

``` -------------------------------- ### Initialize GooglePay with JavaScript - Wallet.js Source: https://context7.com/fluidpay/walletjs/llms.txt Demonstrates initializing the GooglePay class with essential configuration parameters such as container, merchant details, allowed card networks, and transaction information. It also shows how to handle the payment button click event to retrieve and process tokenized payment data. ```javascript import walletjs from "@fluidpay/walletjs"; // Initialize Google Pay with required configuration const googlePay = new walletjs.GooglePay({ // Required: DOM selector or element for button placement container: "#google-pay-container", // Required: Your merchant display name merchantName: "Example Merchant", // Required: Your Fluidpay public API key gatewayMerchantId: "", // Optional: Google merchant ID (for production) merchantId: "BCR2DN4T...", // Required: Allowed card networks // Valid values: "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA" allowedCardNetworks: ["VISA", "MASTERCARD", "AMEX", "DISCOVER"], // Required: Allowed authentication methods // Valid values: "PAN_ONLY", "CRYPTOGRAM_3DS" allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], // Required: Transaction details transactionInfo: { countryCode: "US", currencyCode: "USD", totalPrice: "49.99" }, // Optional: Request customer email emailRequired: true, // Optional: Request billing address billingAddressRequired: true, billingAddressParameters: { format: "FULL", phoneNumberRequired: true }, // Optional: Button type - "buy", "donate", "plain", etc. buttonType: "buy", // Required: Callback handler for payment button click onGooglePaymentButtonClicked: (paymentDataRequest) => { paymentDataRequest .then((paymentData) => { // Extract the tokenized payment data const token = paymentData.paymentMethodData.tokenizationData.token; const cardNetwork = paymentData.paymentMethodData.info.cardNetwork; const cardDetails = paymentData.paymentMethodData.info.cardDetails; console.log("Payment token:", token); console.log("Card network:", cardNetwork); console.log("Last 4 digits:", cardDetails); // Send token to your backend server fetch("/api/process-payment", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token: token, email: paymentData.email }) }); }) .catch((err) => { if (err.statusCode === "CANCELED") { console.log("User canceled the payment"); } else { console.error("Payment error:", err); } }); } }); ``` -------------------------------- ### GooglePay Settings Source: https://context7.com/fluidpay/walletjs/llms.txt Configuration object for setting up Google Pay integration. ```APIDOC ## GooglePay Settings ### Description Configuration object for setting up Google Pay integration. ### Method N/A (Configuration Object) ### Endpoint N/A ### Parameters #### Request Body - **container** (string/element) - Required - DOM selector or element for button - **merchantName** (string) - Required - Display name for your business - **gatewayMerchantId** (string) - Required - Fluidpay public API key - **merchantId** (string) - Optional - Google merchant ID (production) - **allowedCardNetworks** (array) - Required - Card networks to accept - **allowedCardAuthMethods** (array) - Required - Auth methods: "PAN_ONLY", "CRYPTOGRAM_3DS" - **transactionInfo** (object) - Required - Transaction details - **emailRequired** (boolean) - Optional - Request customer email - **billingAddressRequired** (boolean) - Optional - Request billing address - **billingAddressParameters** (object) - Optional - Billing address format options - **buttonType** (string) - Optional - Button style: "buy", "donate", "plain" - **onGooglePaymentButtonClicked** (function) - Required - Payment button click handler ### Request Example ```json { "container": "#google-pay-button", "merchantName": "Your Store Name", "gatewayMerchantId": "YOUR_FLUIDPAY_PUBLIC_KEY", "allowedCardNetworks": ["visa", "mastercard"], "allowedCardAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"], "transactionInfo": { "totalPrice": "10.00", "currencyCode": "USD" }, "emailRequired": true, "billingAddressRequired": true, "buttonType": "buy", "onGooglePaymentButtonClicked": function(paymentData) { // Handle payment button click console.log(paymentData); } } ``` ### Response #### Success Response (N/A - Configuration Object) N/A #### Response Example N/A ``` -------------------------------- ### Initialize and Submit Apple Pay Payment (JavaScript Module) Source: https://context7.com/fluidpay/walletjs/llms.txt Demonstrates how to initialize the ApplePay class with Fluidpay credentials and payment details, then submit a payment request. It handles the asynchronous nature of payment authorization and provides success or failure feedback. ```javascript import walletjs from "@fluidpay/walletjs"; // Initialize Apple Pay with required configuration const applePay = new walletjs.ApplePay({ // Required: Your Fluidpay public API key key: "myKey0123456789", // Required: Fluidpay API domain domain: "sandbox.fluidpay.com", // Optional: Override the merchant domain in certificate domainName: "", // Required: Apple Pay payment configuration payment: { merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"], supportedNetworks: ["visa", "masterCard", "discover"], countryCode: "US", version: 3, merchantIdentifier: "my.merchant.id.app", // Optional: Request billing contact information requiredBillingContactFields: ["email", "name", "phone", "postalAddress"] }, // Required: Payment details details: { total: { label: "Total Amount", amount: { currency: "USD", value: "10.61" } } }, // Required: Payment options options: { requestShipping: false } }); // Submit the payment - triggers Apple Pay UI async function processApplePayment() { const result = await applePay.submit(); if (result.status === "success") { console.log("Payment token:", result.token); console.log("Raw response:", result.raw_response); // Send token to your backend to complete the transaction } else { console.error("Payment failed:", result.error); } } // Example success response: // { "status": "success", "token": "aBCd1234", "raw_response": {...} } // Example failure response: // { "status": "fail", "error": "missing required parameter - key" } ``` -------------------------------- ### ApplePay Settings Source: https://context7.com/fluidpay/walletjs/llms.txt Configuration object for setting up Apple Pay integration. ```APIDOC ## ApplePay Settings ### Description Configuration object for setting up Apple Pay integration. ### Method N/A (Configuration Object) ### Endpoint N/A ### Parameters #### Request Body - **key** (string) - Required - Fluidpay public API key - **domain** (string) - Required - Fluidpay API domain (e.g., "sandbox.fluidpay.com") - **domainName** (string) - Optional - Override merchant domain in certificate - **payment** (object) - Required - Apple Pay payment configuration - **payment.merchantCapabilities** (array) - Required - Capabilities: "supports3DS", "supportsCredit", "supportsDebit" - **payment.supportedNetworks** (array) - Required - Networks: "visa", "masterCard", "discover", "amex" - **payment.countryCode** (string) - Required - Two-letter country code - **payment.version** (number) - Required - Apple Pay version (typically 3) - **payment.merchantIdentifier** (string) - Required - Your Apple Pay merchant ID - **payment.requiredBillingContactFields** (array) - Optional - Fields: "email", "name", "phone", "postalAddress" - **details** (object) - Required - Payment details with total amount - **options** (object) - Required - Payment options (e.g., requestShipping) ### Request Example ```json { "key": "YOUR_FLUIDPAY_PUBLIC_KEY", "domain": "sandbox.fluidpay.com", "payment": { "merchantCapabilities": ["supports3DS", "supportsCredit"], "supportedNetworks": ["visa", "masterCard"], "countryCode": "US", "version": 3, "merchantIdentifier": "merchant.com.yourdomain.merchant", "requiredBillingContactFields": ["email", "postalAddress"] }, "details": { "total": { "label": "Your Store Name", "amount": "10.00" } }, "options": { "requestShipping": true } } ``` ### Response #### Success Response (N/A - Configuration Object) N/A #### Response Example N/A ``` -------------------------------- ### Configure and Initialize Google Pay with WalletJS Source: https://github.com/fluidpay/walletjs/blob/master/example.html This snippet demonstrates how to initialize the Google Pay component using WalletJS. It requires a container element, merchant information, allowed card networks and authentication methods, transaction details, and a callback function to handle the payment process upon button click. The callback receives payment data, from which the token can be extracted and sent to a backend server for transaction processing. ```javascript new walletjs.GooglePay({ container: "#gcontainer", merchantName: "Example Merchant", gatewayMerchantId: "", allowedCardNetworks: ["VISA"], allowedCardAuthMethods: ["PAN_ONLY"], transactionInfo: { countryCode: "US", currencyCode: "USD", totalPrice: "1.23" }, onGooglePaymentButtonClicked: paymentDataRequest => { paymentDataRequest .then(paymentData => { // Get the token. const token = paymentData.paymentMethodData.tokenizationData.token; // Send the token to your backend server, which will // then call our API to create a new transaction with // the token set as the payment method. }) .catch(err => { console.log(err); }); } }); ``` -------------------------------- ### Configure and Initialize Apple Pay with WalletJS Source: https://github.com/fluidpay/walletjs/blob/master/example.html This snippet shows the initialization of the Apple Pay component using WalletJS. It requires API keys, domain information, payment details such as supported networks and capabilities, merchant identifier, and transaction amount. An options object can be provided to control features like shipping requests. The initialized object has a `submit` method to initiate the Apple Pay payment flow. ```javascript const ap = new walletjs.ApplePay({ key: "myKey0123456789", domain: "sandbox.fluidpay.com", payment: { merchantCapabilities: [ "supports3DS", "supportsCredit", "supportsDebit" ], supportedNetworks: ["visa", "masterCard", "discover"], countryCode: "US", version: 3, merchantIdentifier: "my.merchant.id.app" }, details: { total: { label: "Total Amount", amount: { currency: "USD", value: "10.61" } } }, options: { requestShipping: false } }); function submitApplePay() { ap.submit(); } ``` -------------------------------- ### Implement Apple Pay with @fluidpay/walletjs Source: https://github.com/fluidpay/walletjs/blob/master/README.md This JavaScript code demonstrates how to initialize and use the Apple Pay functionality provided by the @fluidpay/walletjs library. It requires a merchant key and domain configuration. ```html ``` ```javascript import walletjs from "@fluidpay/walletjs"; const ap = new walletjs.ApplePay({ key: "myKey0123456789", domain: "sandbox.fluidpay.com", domainName: "", // optionally override the Merchant Domain referenced in their certificate. payment: { merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"], supportedNetworks: ["visa", "masterCard", "discover"], countryCode: "US", version: 3, merchantIdentifier: "my.merchant.id.app", // Use requiredBillingContactFields to request the user's // billing address that is associated with their payment method. requiredBillingContactFields: ["email", "name", "phone", "postalAddress"], // Default undefinied }, details: { total: { label: "Total Amount", amount: { currency: "USD", value: "10.61" }, }, }, options: { requestShipping: false, }, }); function submitApplePay() { var resp = ap.submit(); console.log(resp); } ``` -------------------------------- ### Google Pay Integration with @fluidpay/walletjs Source: https://github.com/fluidpay/walletjs/blob/master/README.md This JavaScript code shows how to set up and use Google Pay with the @fluidpay/walletjs library. It requires a container element for the button and merchant-specific configuration. ```javascript import walletjs from "@fluidpay/walletjs"; // Create a new Google Pay instance with your // given settings. let gp = new walletjs.GooglePay({ container: "#container", merchantName: "Example Merchant", gatewayMerchantId: "", allowedCardNetworks: ["VISA"], allowedCardAuthMethods: ["PAN_ONLY"], transactionInfo: { countryCode: "US", currencyCode: "USD", totalPrice: "1.23", }, // Deal with response from payment clicked onGooglePaymentButtonClicked: (paymentDataRequest) => { paymentDataRequest .then((paymentData) => { // Get the token. const token = paymentData.paymentMethodData.tokenizationData.token; // Send the token to your backend server, which will // then call our API to create a new transaction with // the token set as the payment method. }) .catch((err) => { console.log(err); }); }, }); ``` ```html

``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.