Skip to content

Commit

Permalink
feat: add possibility to pass apple pay button id for apple pay session
Browse files Browse the repository at this point in the history
ehrdi committed Aug 6, 2024

Verified

This commit was signed with the committer’s verified signature.
fiji-flo Florian Dieminger
1 parent 63fe6ec commit 32070dc
Showing 3 changed files with 19 additions and 13 deletions.
23 changes: 12 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -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. |

<details>
<summary>Example Session Configuration Object:</summary>
4 changes: 4 additions & 0 deletions src/interfaces/PCPApplePay.interfaces.ts
Original file line number Diff line number Diff line change
@@ -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
5 changes: 3 additions & 2 deletions src/lib/PCPApplePaySession.ts
Original file line number Diff line number Diff line change
@@ -238,14 +238,15 @@ export class PCPApplePaySession {
}

private async loadApplePayButtonScript(): Promise<void> {
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 =

0 comments on commit 32070dc

Please sign in to comment.