From 32070dc9eb961f174071f7eade4449babb03d007 Mon Sep 17 00:00:00 2001 From: Dirk Ehrhardt Date: Tue, 6 Aug 2024 09:24:48 +0200 Subject: [PATCH] feat: add possibility to pass apple pay button id for apple pay session --- README.md | 23 ++++++++++++----------- src/interfaces/PCPApplePay.interfaces.ts | 4 ++++ src/lib/PCPApplePaySession.ts | 5 +++-- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 5af3b56..8616441 100644 --- a/README.md +++ b/README.md @@ -438,17 +438,18 @@ The PCPApplePaySessionConfig interface extends [ApplePayJS.ApplePayPaymentReques #### Additional PCPApplePaySessionConfig Properties -| Property | Type | Description | -| -------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| applePayVersion | `number` | The version of Apple Pay on the Web that your website supports. See [version history](https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_on_the_web_version_history). | -| validateMerchantURL | `string` | The URL your server must use to validate itself and obtain a merchant session object. | -| processPaymentURL | `string` | The URL your server must use to process the payment. | -| paymentMethodSelectedCallback | `function` | Callback function called when the user selects a new payment method. | -| couponCodeChangedCallback | `function` | Callback function called when the user enters or updates a coupon code. | -| shippingMethodSelectedCallback | `function` | Callback function called when the user selects a shipping method. | -| shippingContactAddressSelectedCallback | `function` | Callback function called when the user selects a shipping contact in the payment sheet. | -| cancelCallback | `function` | Callback function called when the payment UI is dismissed. | -| errorCallback | `function` | Callback function called when an error occurs. | +| Property | Type | Description | +| -------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| applePayVersion | `number` | The version of Apple Pay on the Web that your website supports. See [version history](https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_on_the_web_version_history). | +| validateMerchantURL | `string` | The URL your server must use to validate itself and obtain a merchant session object. | +| processPaymentURL | `string` | The URL your server must use to process the payment. | +| applePayButtonId | `string` (optional) | The ID for the Apple Pay button element. Default is "apple-pay-button-script". | +| paymentMethodSelectedCallback | `function` (optional) | Callback function called when the user selects a new payment method. | +| couponCodeChangedCallback | `function` (optional) | Callback function called when the user enters or updates a coupon code. | +| shippingMethodSelectedCallback | `function` (optional) | Callback function called when the user selects a shipping method. | +| shippingContactAddressSelectedCallback | `function` (optional) | Callback function called when the user selects a shipping contact in the payment sheet. | +| cancelCallback | `function` (optional) | Callback function called when the payment UI is dismissed. | +| errorCallback | `function` (optional) | Callback function called when an error occurs. |
Example Session Configuration Object: diff --git a/src/interfaces/PCPApplePay.interfaces.ts b/src/interfaces/PCPApplePay.interfaces.ts index 50fbed6..4b00fa3 100644 --- a/src/interfaces/PCPApplePay.interfaces.ts +++ b/src/interfaces/PCPApplePay.interfaces.ts @@ -66,6 +66,10 @@ export interface PCPApplePaySessionConfig * The URL your server must use to process the payment. */ processPaymentURL: string; + /** + * The ID for the Apple Pay button element. Default is "apple-pay-button-script". + */ + applePayButtonId?: string; /** * Callback function that is called when the user selects a new payment method * @param {ApplePayJS.ApplePayPaymentMethod} paymentMethod diff --git a/src/lib/PCPApplePaySession.ts b/src/lib/PCPApplePaySession.ts index 3f04c31..bbe9d8c 100644 --- a/src/lib/PCPApplePaySession.ts +++ b/src/lib/PCPApplePaySession.ts @@ -238,14 +238,15 @@ export class PCPApplePaySession { } private async loadApplePayButtonScript(): Promise { + const scriptId = this.config?.applePayButtonId || 'apple-pay-button-script'; return new Promise((resolve, reject) => { - if (document.getElementById('apple-pay-button-script')) { + if (document.getElementById(scriptId)) { resolve(); // Script already loaded return; } const script = document.createElement('script'); - script.id = 'apple-pay-button-script'; + script.id = scriptId; script.async = true; script.crossOrigin = 'anonymous'; script.src =