-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(payments-plugin): Make Stripe plugin channel-aware (#2058)
BREAKING CHANGE: The Stripe plugin has been made channel aware. This means your api key and webhook secret are now stored in the database, per channel, instead of environment variables. To migrate to v2 of the Stripe plugin from @vendure/payments you need to: Remove the apiKey and webhookSigningSecret from the plugin initialization in vendure-config.ts: ```diff -StripePlugin.init({ - apiKey: process.env.YOUR_STRIPE_SECRET_KEY, - webhookSigningSecret: process.env.YOUR_STRIPE_WEBHOOK_SIGNING_SECRET, - storeCustomersInStripe: true, -}), +StripePlugin.init({ + storeCustomersInStripe: true, + }), ``` Start the server and login as administrator. For each channel that you'd like to use Stripe payments, you need to create a payment method with payment handler Stripe payment and the apiKey and webhookSigningSecret belonging to that channel's Stripe account.
- Loading branch information
1 parent
6ada0b3
commit 3b88702
Showing
16 changed files
with
491 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
packages/payments-plugin/e2e/stripe-checkout-test.plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
/* eslint-disable */ | ||
import { Controller, Res, Get } from '@nestjs/common'; | ||
import { PluginCommonModule, VendurePlugin } from '@vendure/core'; | ||
import { Response } from 'express'; | ||
|
||
import { clientSecret } from './stripe-dev-server'; | ||
|
||
/** | ||
* This test controller returns the Stripe intent checkout page | ||
* with the client secret generated by the dev-server | ||
*/ | ||
@Controller() | ||
export class StripeTestCheckoutController { | ||
@Get('checkout') | ||
async webhook(@Res() res: Response): Promise<void> { | ||
res.send(` | ||
<head> | ||
<title>Checkout</title> | ||
<script src="https://js.stripe.com/v3/"></script> | ||
</head> | ||
<html> | ||
<form id="payment-form"> | ||
<div id="payment-element"> | ||
<!-- Elements will create form elements here --> | ||
</div> | ||
<button id="submit">Submit</button> | ||
<div id="error-message"> | ||
<!-- Display error message to your customers here --> | ||
</div> | ||
</form> | ||
<script> | ||
// Set your publishable key: remember to change this to your live publishable key in production | ||
// See your keys here: https://dashboard.stripe.com/apikeys | ||
const stripe = Stripe('${process.env.STRIPE_PUBLISHABLE_KEY}'); | ||
const options = { | ||
clientSecret: '${clientSecret}', | ||
// Fully customizable with appearance API. | ||
appearance: {/*...*/}, | ||
}; | ||
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3 | ||
const elements = stripe.elements(options); | ||
// Create and mount the Payment Element | ||
const paymentElement = elements.create('payment'); | ||
paymentElement.mount('#payment-element'); | ||
const form = document.getElementById('payment-form'); | ||
form.addEventListener('submit', async (event) => { | ||
event.preventDefault(); | ||
// const {error} = await stripe.confirmSetup({ | ||
const {error} = await stripe.confirmPayment({ | ||
//\`Elements\` instance that was used to create the Payment Element | ||
elements, | ||
confirmParams: { | ||
return_url: 'http://localhost:3050/checkout?success=true', | ||
} | ||
}); | ||
if (error) { | ||
// This point will only be reached if there is an immediate error when | ||
// confirming the payment. Show error to your customer (for example, payment | ||
// details incomplete) | ||
const messageContainer = document.querySelector('#error-message'); | ||
messageContainer.textContent = error.message; | ||
} else { | ||
// Your customer will be redirected to your \`return_url\`. For some payment | ||
// methods like iDEAL, your customer will be redirected to an intermediate | ||
// site first to authorize the payment, then redirected to the \`return_url\`. | ||
} | ||
}); | ||
</script> | ||
</html> | ||
`); | ||
} | ||
} | ||
|
||
/** | ||
* Test plugin for serving the Stripe intent checkout page | ||
*/ | ||
@VendurePlugin({ | ||
imports: [PluginCommonModule], | ||
controllers: [StripeTestCheckoutController], | ||
}) | ||
export class StripeCheckoutTestPlugin {} |
Oops, something went wrong.