Skip to content

Add standalone Apple Pay button support in Stripe payment form #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

Khalid2Faisal
Copy link
Collaborator

@Khalid2Faisal Khalid2Faisal commented May 4, 2025

This PR adds support for using Apple Pay as a standalone payment option in the Stripe payment form. The implementation includes:

Key changes

  • Added a dedicated Apple Pay button that appears when Apple Pay is available
  • Added cancel event handler to reset button state when user closes Apple Pay sheet
  • Implemented direct callback approach with onApplePayAvailable to notify when Apple Pay is available

New configuration options

The PR introduces new configuration options in PaymentProviderFormOptions.applePayConfig:

  • priceMacro: Specifies which price macro to use from the product bundle properties (defaults to "new-price")
  • productMacro: Specifies which product macro to use for product name from the bundle properties
  • productLabel: Directly set the product label shown on Apple Pay sheet
  • staticPrice: Alternative to using bundle properties - directly set price details:
    -- currency: Currency code (e.g., "usd")
    -- amount: Price amount in cents
  • requestPayerName, requestPayerEmail, requestPayerPhone: Configure what information to request
  • onApplePayAvailable: Callback function triggered when Apple Pay is available
  • showApplePayInPaymentElement: Control visibility of Apple Pay in the payment element (used with default stripe form)

Usage Example

apphud.paymentForm({
    id,
    paymentProvider: "stripe",
    applePay: true,
    applePayConfig: {
        // Use price from product bundle with specified macro
        priceMacro: "new-price",
        
        // Use product name from bundle with specified macro
        productMacro: "custom-1",
        
        // OR directly set the product label
        productLabel: "Premium Subscription",
        
        // OR use static price directly
        staticPrice: {
            currency: "usd",
            amount: 999, // $9.99
        },
        
        // Additional configuration
        requestPayerName?: true;
        requestPayerEmail?: true;
        requestPayerPhone?: false;
        onApplePayAvailable: (isAvailable) => {
            console.log("Apple Pay available:", isAvailable);
        }
    }
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants