Accept a giropay paymentDeprecated
Learn how to accept giropay, a common payment method in Germany.
Warning
Our financial partners are deprecating Giropay. No new business onboarding or transactions will be possible after June 30, 2024. Read our support page for more details.
Caution
The content of this section refers to a Legacy product. You should use the Accept a payment guide for the most recent integration path instead. While Stripe still supports this product, this support might end if the product is deprecated.
giropay is a single use payment method where customers are required to authenticate their payment. Customers pay with giropay by redirecting from your website, authorizing the payment, then returning to your website where you get immediate notification on whether the payment succeeded or failed. Because giropay is a single use payment method, it isn’t compatible with SetupIntents.
Note
Your use of giropay must be in accordance with the giropay Terms of Service.
Set up StripeServer-side
First, you need a Stripe account. Register now.
Use the official libraries for access to the Stripe API from your application:
Create a PaymentIntentServer-side
A PaymentIntent represents your intent to collect payment from a customer and tracks the lifecycle of the payment process.
Create a PaymentIntent
on your server and specify the amount
to collect and the eur
currency (giropay doesn’t support other currencies). If you have an existing Payment Intents integration, add giropay
to the list of payment method types.
Instead of passing the entire PaymentIntent object to your app, return its client secret. The PaymentIntent’s client secret is a unique key that lets you confirm the payment and update payment details on the client, without allowing manipulation of sensitive information, like the payment amount.
Statement descriptors with giropay
giropay lets you provide a custom statement descriptor when creating the PaymentIntent. This can be provided by setting the value for statement_
.
Collect payment method detailsClient-side
Create a payment form on your client to collect the required billing details from the customer:
Field | Value |
---|---|
name | The full name (first and last) of the customer. |
<form id="payment-form"> <div class="form-row"> <label for="name"> Name </label> <input id="name" name="name" required> </div> <!-- Used to display form errors. --> <div id="error-message" role="alert"></div> <button id="submit-button">Pay with giropay</button> </form>
Submit the payment to StripeClient-side
When a customer clicks to pay with giropay, use Stripe.js to submit the payment to Stripe. Stripe.js is the foundational JavaScript library for building payment flows. It automatically handles complexities like the redirect described below, and enables you to extend your integration to other payment methods. Include the Stripe.js script on your checkout page by adding it to the head
of your HTML file.
<head> <title>Checkout</title> <script src="https://js.stripe.com/v3/"></script> </head>
Create an instance of Stripe.js with the following JavaScript on your checkout page.
// 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(
);'pk_test_TYooMQauvdEDq54NiTphI7jx'
Pass the client secret of the PaymentIntent
you created. The client secret is different from your API keys that authenticate Stripe API requests. Handle it carefully because it can complete the charge. Don’t log it, embed it in URLs, or expose it to anyone but the customer.
Confirm giropay payment
Use stripe.confirmGiropayPayment to handle the redirect away from your page and to complete the payment. Add a return_
to this function to indicate where Stripe should redirect the user to after they complete the payment on their bank’s website or mobile application. You must also provide the user’s full name in the billing_
hash.
var stripe = Stripe(
); // Redirects away from the client const {error} = await stripe.confirmGiropayPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { billing_details: { name: "Jenny Rosen" } }, return_url: 'https://example.com/checkout/complete', } ); if (error) { // Inform the customer that there was an error. }'pk_test_TYooMQauvdEDq54NiTphI7jx'
Handling the redirect
The following URL query parameters are provided when Stripe redirects the customer to the return_
.
Parameter | Description |
---|---|
payment_ | The unique identifier for the PaymentIntent . |
payment_ | The client secret of the PaymentIntent object. |
You may also append your own query parameters when providing the return_
. They persist throughout the redirect process. The return_
should correspond to a page on your website that provides the status of the payment. You should verify the status of the PaymentIntent
when rendering the return page. You can do so by using the retrievePaymentIntent
function from Stripe.js and passing in the payment_
.
(async () => { const url = new URL(window.location); const clientSecret = url.searchParams.get('payment_intent_client_secret'); const {paymentIntent, error} = await stripe.retrievePaymentIntent(clientSecret); if (error) { // Handle error } else if (paymentIntent && paymentIntent.status === 'succeeded') { // Handle successful payment } })();
You can find the payment owner’s verified full name on the resulting Charge under the payment_method_details property.
{ "charges": { "data": [ { "payment_method_details": { "giropay": { "verified_name": "Jenny Rosen" }, "type": "giropay" }, "id": "src_16xhynE8WzK49JbAs9M21jaR", "object": "source", "amount": 1099, "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU", "created": 1445277809,