Skip to content
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.

Sign up for GitHub

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

Add PayPal button examples #2964

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add PayPal button examples #2964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
327fd8d
add PayPal ECE example
dunnedev-stripe Jul 24, 2024
a78ba81
add PayPal to index.html
dunnedev-stripe Jul 24, 2024
985937e
set all amounts server side to 5999
dunnedev-stripe Dec 17, 2024
85b5791
add PayPal to main README
ddunne6 Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ This repository includes examples of 3 types of integration.
|Link| ✅ | ✅ | |
|Multibanco| ✅ | ✅ | |
|OXXO| ✅ | ✅ | ✅ |
|PayPal| ✅ | ✅ | ✅ |
|Przelewy24 (P24)| ✅ | ✅ | ✅ |
|SEPA Direct Debit| ✅ | ✅ | ✅ |
|Sofort| ✅ | ✅ | ✅ |
Expand Down
4 changes: 4 additions & 0 deletions custom-payment-flow/client/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,10 @@ <h3>Wallets</h3>
<li><a href="/google-pay.html">Google Pay</a></li>
<li><a href="/grabpay.html">GrabPay</a></li>
</ul>
<h4>Express Checkout Element</h4>
<ul>
<li><a href="/paypal.html">PayPal</a></li>
</ul>
</main>
</body>
</html>
35 changes: 35 additions & 0 deletions custom-payment-flow/client/html/paypal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>PayPal Button</title>

<link rel="stylesheet" href="css/base.css" />
<script src="https://js.stripe.com/v3/"></script>

<script src="/utils.js" defer></script>
<script src="/paypal.js" defer></script>
</head>
<body>
<main>
<a href="/">home</a>
<h1>PayPal Button in Express Checkout Element</h1>
<p>
Before you start, we recommend you create a
<a href="https://developer.paypal.com/tools/sandbox/accounts/"
>PayPal Sandbox account</a
>
to test your integration.
</p>

<div id="express-checkout-element">
<!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
<!-- Display an error message to your customers here -->
</div>
</main>
</body>
</html>
84 changes: 84 additions & 0 deletions custom-payment-flow/client/html/paypal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
document.addEventListener('DOMContentLoaded', async () => {
// Load the publishable key from the server. The publishable key
// is set in your .env file. In practice, most users hard code the
// publishable key when initializing the Stripe object.
const {publishableKey} = await fetch('/config').then((r) => r.json());
if (!publishableKey) {
addMessage(
'No publishable key returned from the server. Please check `.env` and try again'
);
alert('Please set your Stripe publishable API key in the .env file');
}

// 1. Initialize Stripe
const stripe = Stripe(publishableKey, {
apiVersion: '2024-06-20',
});

MODE = 'payment';
AMOUNT = 5999;
CURRENCY = 'eur';

const elements = stripe.elements({
mode: MODE,
amount: AMOUNT,
currency: CURRENCY,
paymentMethodTypes: ['paypal'],
});

const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');

expressCheckoutElement.on('click', (event) => {
const options = {
phoneNumberRequired: true,
};
event.resolve(options);
});

const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message + `Is the amount equal to ${AMOUNT} on the server?`;
};

expressCheckoutElement.on('confirm', async (event) => {
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}

const {error: backendError, clientSecret} = await fetch(
'/create-payment-intent',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
currency: CURRENCY,
paymentMethodType: 'paypal',
}),
}
).then((r) => r.json());

const {error} = await stripe.confirmPayment({
// `elements` instance used to create the Express Checkout Element
elements,
// `clientSecret` from the created PaymentIntent
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});

if (error) {
// This point is only reached if there's an immediate error when
// confirming the payment. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} else {
// The payment UI automatically closes with a success animation.
// Your customer is redirected to your `return_url`.
}
});
});
2 changes: 1 addition & 1 deletion custom-payment-flow/server/node-typescript/src/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ app.post(
async (req: express.Request, res: express.Response): Promise<void> => {
const { currency, paymentMethodType, paymentMethodOptions }: { currency: string, paymentMethodType: string, paymentMethodOptions?: object } = req.body;

let orderAmount = 1400;
let orderAmount = 5999;
let params: Stripe.PaymentIntentCreateParams;

// Each payment method type has support for different currencies. In order to
Expand Down
27 changes: 15 additions & 12 deletions custom-payment-flow/server/node/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
const express = require('express');
const cors = require('cors');
const app = express();
const { resolve } = require('path');
const {resolve} = require('path');
// Replace if using a different env file or config
const env = require('dotenv').config({ path: './.env' });
const env = require('dotenv').config({path: './.env'});
const calculateTax = false;

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY, {
apiVersion: "2023-10-16",
appInfo: { // For sample support and debugging, not required for production:
name: "stripe-samples/accept-a-payment/custom-payment-flow",
version: "0.0.2",
url: "https://github.com/stripe-samples"
}
apiVersion: '2023-10-16',
appInfo: {
// For sample support and debugging, not required for production:
name: 'stripe-samples/accept-a-payment/custom-payment-flow',
version: '0.0.2',
url: 'https://github.com/stripe-samples',
},
});

app.use(express.static(process.env.STATIC_DIR));
Expand All @@ -27,9 +28,11 @@ app.use(
},
})
);
app.use(cors({
origin: 'http://localhost:3000'
}));
app.use(
cors({
origin: 'http://localhost:3000',
})
);

app.get('/', (req, res) => {
const path = resolve(process.env.STATIC_DIR + '/index.html');
Expand Down Expand Up @@ -79,7 +82,7 @@ app.post('/create-payment-intent', async (req, res) => {
// at https://dashboard.stripe.com/settings/payment_methods.
//
// Some example payment method types include `card`, `ideal`, and `link`.
let orderAmount = 1400;
let orderAmount = 5999;
let params = {};

if (calculateTax) {
Expand Down