displaying custom error messages in stripecheckout.js - stripe-payments

I am using stripecheckout.js for handling payments on my site.
I am configuring the object to be send to the stripe pop up as:
stripeHandler = StripeCheckout.configure({
key: $scope.stripeKey,
image: 'img/logo.png',
locale: 'auto',
panelLabel: 'Pay',
color: 'black',
token: handleToken
});
where handleToken is my callback.
Opening the stripe pop up as :
stripeHandler.open({name: //some name,
description: //some description,
amount: //some amount,
currency: //some currency
});
Now I want to display error custom messages related to expiry and cvv fields.
How do I have to pass these messages inside stripe popup.

You can't. Checkout has a number of configuration options, but it is not possible to customize the error messages.
If Checkout supports your language, you can use the data-locale attribute to force a specific language, or set it to auto to use the customer's preferred language automatically.

Related

Stripe subscription webhooks missing metadata and client_reference_id

I'm having issues linking stripe webhooks to customers, since I generally use the client_reference_id or metadata field, however subscription webhooks seem to not have these fields. For example the event checkout.session.completed does contain the client_reference_id, whereas invoice.paid does not.
NodeJS code to generate payment:
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: `Premium license`,
},
unit_amount: 600,
recurring: {
interval: "month",
interval_count: 1
},
},
quantity: 1
}],
subscription_data: {
trial_period_days: 1,
},
metadata: { 'userId': userId },
client_reference_id: userId,
mode: 'subscription',
customer_email: customerEmail,
success_url: `...`,
cancel_url: `...`,
});
Yes, it's a major missing that there is no option to link between events. This becomes critical when you can't rely on the order of webhook events.
I did work around this using metadata though. Pass your own reference id, say, my_database_reference_id to the metadata of both checkout.session.create and also in the subscription_data in checkout creation. This can be the same value you pass inside client_reference_id. Now you can use this while listening to webhook, to connect between the checkout session and subscription object, irrespective of the order it comes in.
NB: Please be warned that metadata can be edited by the Stripe Account, so please be careful if you are a platform and relying on this for any logic.
The client_reference_id is a property of Checkout Session objects in Stripe, but not any other Stripe objects.
Subscription events (like customer.subscription.created) describe Subscription objects, and Invoice events (like invoice.paid) describe Invoices, neither of which are Checkout Sessions, so the property is missing.
Typically the way all of this is linked together is with the Customer object (cus_123) in Stripe, which should be present on all of the events mentioned in the customer property. Checkout will create the Customer object for you if you don't specify an existing one.

PayPal subscription and webhooks

I made an website with a service that I am charging for. I want to create a PayPal subscription. I need that subscription to be connected with my backend (firebase functions - node.js) so I can change some data in the database to serve my users different content depending if they are paying or not. I wanted to use PayPal buttons for my subscription but I can't find a way to connect that button with my backend so it seems PayPal buttons aren't optimal for my problem. I can't use Stripe because it's not supported in my country. Can you offer me a different solution for my subscripton payments or show how can I use PayPal?
You can use Paypal Node SDK for your use case instead of relying to the embeddable Paypal subscribe button. The SDK will give you better integration with NodeJs.
There are basically 2 steps to do this:
1.) Define the Billing Plan Object
The billing plan object defines the subscription plan, including the number of cycles, frequency of payment, any setup fees, and so on.
var billingPlanAttribs = {
name: 'Food of the World Club Membership: Standard',
description: 'Monthly plan for getting the t-shirt of the month.',
type: 'fixed',
payment_definitions: [{
name: 'Standard Plan',
type: 'REGULAR',
frequency_interval: '1',
frequency: 'MONTH',
cycles: '11',
amount: {
currency: 'USD',
value: '19.99'
}
}],
merchant_preferences: {
setup_fee: {
currency: 'USD',
value: '1'
},
cancel_url: 'http://localhost:3000/cancel',
return_url: 'http://localhost:3000/processagreement',
max_fail_attempts: '0',
auto_bill_amount: 'YES',
initial_fail_amount_action: 'CONTINUE'
}
};
Of course, you will need to change cancel_url and return_url to your actual Firebase functions endpoints (or localhost if you are running your functions in localhost for development purposes)
2.) Create and Activate Billing Plan, so once you created or defined your billing - you will need to create that object and activate the billing plan like so:
paypal.billingPlan.create(billingPlanAttribs, function (error, billingPlan){
var billingPlanUpdateAttributes;
if (error){
console.error(JSON.stringify(error));
throw error;
} else {
// Create billing plan patch object
billingPlanUpdateAttributes = [{
op: 'replace',
path: '/',
value: {
state: 'ACTIVE'
}
}];
// Activate the plan by changing status to active
paypal.billingPlan.update(billingPlan.id, billingPlanUpdateAttributes, function(error, response){
if (error){
console.error(JSON.stringify(error));
throw error;
} else {
console.log('Billing plan created under ID: ' + billingPlan.id);
}
});
}
});
Again, all of these are documented in Paypal's Developer Section.
Here's also a link to their github example using NodeJs (which is same underlying backend as a Firebase Function)

Stripe default card in checkout

Is there a way to fill fields in a Stripe checkout page when customer comes back? I've tried to set default payment method for customer with webhooks (payment_method.attached) but this default credit card won't show up during checkout. Instead Stripe creates new payment method for the customer every time he pays. It's strange to have dozen of exactly the same credit cards in a Stripe dashboard. Here is my current code:
const checkout = await stripe.checkout.sessions.create({
cancel_url,
success_url,
payment_method_types: ["card"],
mode: "payment",
customer: stripeCustomer,
client_reference_id: stripeCustomer,
metadata: {
//...
},
line_items: [{
price_data: {
currency: 'usd',
product_data: {
name: packetDisplayName,
},
unit_amount: packetPrice,
},
quantity: 1
}]
})
I later use session id to redirect to checkout then perform few operations in a webhook endpoint
Thanks for taking the time to read my question, cheers
Checkout does not currently support using Payment Methods already attached to the provided Customer.
More broadly, there is not a concept "default" payment method for one-time payments for a customer, only for invoices.
If you already have a known Customer and an attached payment method, you also have the option of creating the payment yourself, directly, using those details.
try its work for me in Node.JS
For add card in node js
let card = await stripe.customers.createSource(customerid, {
source: token
});
Make card as default card
let updatecard = await stripe.customers.update(customerid, {
default_source: card.id
});
you can replace card.id if you just want update card only

Send Shipping Address details with Stripe Custom Checkout

I have a stripe checkout that's using the now unsupported "data-shipping-address="true"" parameter. This works as expected when using the simple stripe checkout with the following code:
<script
src="https://checkout.stripe.com/checkout.js"
class="stripe-button"
data-key="<?php echo $stripe['publishable_key']; ?>"
data-amount="1000"
data-currency="gbp"
data-allow-remember-me="true"
data-shipping-address="true"
data-billing-address="true"
data-label="Proceed to payment details"
data-image=""
data-description="TrillShirts">
</script>
but if I call it in a .js file I can't get it to post the data taken from the Shipping Details. Here's the code I have:
var handler = StripeCheckout.configure({
key: 'pk_test_JfqHIgPSCG2oWOsJ54PWS0Nl',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
billingAddress: 'true',
shippingAddress: 'true',
token: function(token) {
console.log(token.id);
console.log(token.email);
// here I try to find the shippingAddress using cosole.log
console.log(token.shippingAddressLine1);
console.log(token.stripeShippingAddressLine1);
// When I eventually have the shipping address, I will insert it in the same way as below
$(".stripeToken").val(token.id);
$(".stripeEmail").val(token.email);
$(".stripe").submit();
}
});
document.getElementById('pay').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'TrillShirts',
description: 'Childcatcher Tee',
currency: 'gbp',
amount: 2000
});
});
});
Both of the following return undefined in the console, so I can't figure out the format that the Shipping Details come back in.
console.log(token.shippingAddressLine1);
console.log(token.stripeShippingAddressLine1);
Once I know the format and have a successful console log I can use jQuery to insert the data into the form before submit.
Can anyone help?
With Custom Checkout, when shippingAddress is enabled, the shipping details are passed to your token callback function as second argument of the function. This is the args parameter shown in the token callback reference in this doc.
So in your case you would need to modify the signature of your token callback function from function(token) {...} to function(token, args) {...} and then you should be able to get the info from args.
Here is an example: https://jsfiddle.net/rghpes57/3/
in this example the second console.log is the one you want to look at to see how the object looks like.

JHipster - JhiAlertService - How to decide how long alerts are displayed?

I have generated a JHipster project with version 4.9.0.
I am using the JhiAlertService to display various messages to users.
I would like to know how to send in parameters to indicate how long the messages are displayed.
JhiAlertService comes from the ng-jhipster library.
You can view the code of alert.service.ts to see the available parameters.
For customizing the timeout, use the addAlert method and pass it a JhiAlert object containing a timeout parameter:
this.alertService.addAlert({type: 'success', msg: 'A short message', timeout: 1000}, []);
Note that if you are using the i18n option, the msg field is the name of the i18n JSON key, and the params field should contain any information that is interpolated into the message. So for displaying an alert when the "Admin" user is saved successfully, you would use:
this.alertService.addAlert({type: 'success', msg: 'userManagement.updated', params: { param: 'admin' }, timeout: 1000}, []);

Resources