Quantcast
Channel: Active questions tagged paypal - Stack Overflow
Viewing all articles
Browse latest Browse all 516

The Apple Pay button is not showing in the PayPal integration

$
0
0

I tested this code locally using the same .env with Ngrok and my server (rehosting localhost:3000 like Ngrok), and the button appears on both Mac and iPhone. However, when I deploy it on Netlify with a domain and HTTPS, the button doesn't appear. I've added the Apple well-known file to the backend, and I've also registered the domain with PayPal for Apple Pay.

import { useEffect, useState } from "react";import { PayPalScriptProvider, PayPalButtons, FUNDING } from "@paypal/react-paypal-js";import axios from "axios";const PayPalPayment = ({ fundingSource, amount, payee, fee, onOrder }) => {    const [test, setTest] = useState('')    return (<PayPalButtons            fundingSource={fundingSource}            style={{ layout: "vertical" }}            createOrder={async () => {                try {                    const response = await axios.post("/jobs/payment/create", {                        amount,                        payee,                        fee,                    });                    console.log("response", response.data.orderId.orderId);                    return response.data.orderId.orderId;                } catch (error) {                    console.error("Error creating order:", error);                    return null;                }            }}            onApprove={async (data) => {                try {                    const response = await axios.post("/jobs/payment/capture", {                        orderID: data.orderID,                    });                    onOrder(response.data.paymentID);                } catch (error) {                    console.error("Error capturing payment:", error);                }            }}        />    );};const PaypalButton = ({ amount, payee, onOrder }) => {    const original_amount = (amount / 1.2).toFixed(2)    const fee = amount - original_amount;    // Card fee: 2.99% + 0.49 on the platform's 20% cut    const cardFee = fee - (amount * 0.0299 + 0.49);    // PayPal fee: 3.49% + 0.49 on the platform's 20% cut    const paypalFee = fee - (amount * 0.0349 + 0.49);    const applePayFee = fee - (amount * 0.0409 + 0.49);    return (<div className="paypal-pay-button"><PayPalPayment fundingSource={FUNDING.PAYPAL} amount={amount} payee={payee} fee={paypalFee} onOrder={onOrder} /><PayPalPayment fundingSource={FUNDING.APPLEPAY} amount={amount} payee={payee} fee={applePayFee} onOrder={onOrder} /><PayPalPayment fundingSource={FUNDING.CARD} amount={amount} payee={payee} fee={cardFee} onOrder={onOrder} /></div>    );}export default PaypalButton;

Viewing all articles
Browse latest Browse all 516

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>