In this tutorial, you learn how to integrate iDEAL payments with Stripe Web Elements to collect payment method details and create a payment source in Stripe for payment processing. After that, you can create a Chargebee subscription along with the payment information collected. This process includes the following steps:
Before trying out this tutorial, you need to set up the following:
Also, refer to the following Stripe help topics for more information on payment setups:
Learn about payment methods
Accept an iDEAL payment
Configure and enable Stripe and iDEAL in the Chargebee application
By default, the Single Euro Payments Area (SEPA) is not automatically enabled in the Stripe API, therefore If you want to accept recurring direct debit payments using SEPA, you must specify it in the Stripe API. To do that, follow the instruction here as well as how to set up iDEAL payments with Sources in Stripe documentation.
Setting up SEPA is a mandatory step for recurring payments, so make sure that you set up parameters specific to SEPA during your Chargebee integration.
Install Stripe to use their official libraries for access to the Stripe API:
| Resources
# Install via npm
npm install --save stripe
Payment method details are collected on the client side with Stripe Elements. In this step, you learn how to set up Single Euro Payments Area (SEPA), integrate Stripe.js and mount it on your checkout page.
Always load Stripe.js directly from js.stripe.com to ensure PCI compliance.
Create a checkout page (checkout.html) and include Stripe.js in it.
# checkout.html
<head>
<title>Checkout</title>
<script src="https://js.stripe.com/v3/"></script>
</head>
Create a Stripe Elements instance on your checkout page.
var stripe = Stripe('{stripe_API_key}');
var elements = stripe.elements();
idealBank ElementOn your checkout page, create a payment form that includes a placeholder (container) for idealBank element by creating empty DOM nodes with a unique ID.
<form id="payment-form">
<div class="form-row">
<label for="accountholder-name">
Name
</label>
<input id="accountholder-name" name="accountholder-name">
</div>
<div class="form-row">
<!--
Using a label with a for attribute that matches the ID of the
Element container enables the Element to automatically gain focus
when the customer clicks on the label.
-->
<label for="ideal-bank-element">
iDEAL Bank
</label>
<div id="ideal-bank-element">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<button>Submit Payment</button>
<!-- Used to display form errors. -->
<div id="error-message" role="alert"></div>
</form>
idealBank elementOnce your payment form is loaded, create an instance of an idealBank element and mount it on the Element container of your checkout page.
var options = {
// Custom styling can be passed to options when creating an Element
style: {
base: {
padding: '10px 12px',
color: '#32325d',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
},
},
},
};
// Create an instance of the idealBank Element
var idealBank = elements.create('idealBank', options);
// Add an instance of the idealBank Element into
// the `ideal-bank-element` <div>
idealBank.mount('#ideal-bank-element');
You can customize Stripe Elements in order to maintain the style consistency of your site, this can ensure that your customers have a seamless checkout experience.
SourceCreate a payment source (Source) and specify the currency as euro as well as the amount to collect. Source can be a bank account, an ACH transfer, or an iDEAL payment. Source is a method that handles bank payments, for details, see Stripe API Reference - Sources .
iDEAL only supports Euro.
The authorized amount must be the same as the charged amount.
The user must provide a redirect URL for payment processing.
async function genIdealSource() {
return stripe.sources.create({
type: "ideal",
currency: "eur",
amount: 9900,
owner: {
email: "[email protected]",
address: {
country: "NL"
}
},
redirect: {return_url: baseUrl+"authorizedPayment"}
});
}
app.get('/sourceRedirect', async (req, res) => {
genIdealSource().then((response) => {
console.log(response);
res.send(response.redirect.url);
// res.redirect(response.redirect.url);
})
});
If you choose to directly send the response to the client side, you will receive a 200 response along with source information from Stripe. However, if you choose to directly send the redirected request from the server-side, you will receive 3xx response at your client-side instead.
SourceCreate an event listener to contact the backend for creating a Source.
form.addEventListener('submit', function (event) {
event.preventDefault();
fetch("http://{your_domain}/sourceRedirect")
.then((response) => {
// response is 3xx, implement lines 6-8
// if(response.redirected){
// window.location.href = response.url;
// }
// response is 200, then implement 10-12
if(response.url !== undefined){
window.location.href = response.url;
}
})
.catch(error => console.log(error));
});
You must provide your own redirection logic as per the status of the response. If the response is 3xx, then the redirect flag will be set to true, in this case, implement lines 6-8 in the code above. However, if the response is 200, then it means the redirect URL is present, in this case, implement lines 10-12.
Pass the ID of the successfully authorized payment_method[type] and payment_method[gateway_account_id] to Chargebee's Create a Subscription API to create a subscription.
When you create a subscription using the Chargebee API, you must make sure that the correct values are also included in payment_method[type] and payment_method[gateway_account_id]. The value for payment_method[gateway_account_id] is your Stripe gateway account ID, whereas the value for payment_method[type] is ideal. For payment_method[tmp_token] , the value is your authorized source ID.
curl https://{site-name}.chargebee.com/api/v2/subscriptions \
-X POST \
-u {site_api_key}:\
-d plan_id=6-"month-plan" \
-d auto_collection="on" \
-d customer[first_name]="John" \
-d customer[last_name]="Doe" \
-d customer[email]="[email protected]" \
-d billing_address[first_name]="John" \
-d billing_address[last_name]="Doe" \
-d billing_address[line1]="PO Box 9999" \
-d billing_address[city]="Walnut" \
-d billing_address[state]="California" \
-d billing_address[zip]="91789" \
-d billing_address[country]="FR" \
-d payment_method[type]="ideal" \
-d payment_method[gateway_account_id]="{your_gateway_account_id}" \
-d payment_method[tmp_token]="{authorized_source_id}"
You have successfully integrated iDEAL payments using Stripe Elements, and create a Chargebee subscription with the payment information collected.