Is there any way to re-size the email width of default stripe checkout and also the other fields...
https://stripe.com/docs/checkout#integration-custom
e.g
name: 'Demo Site',
description: '2 widgets',
currency: "sek",
amount: 2000
with
width: 500 => it is possible?
it is possible to add a width attributes to customize the any controls embedded at the stripe form?
There is unfortunately no way to tweak the look of Checkout at the moment. If that doesn't suit your needs, you'd need to use Stripe.js to build your own form on your end to match exactly the look and feel you want.
Related
I recently signed up for Stripe and have successfully integrated Payment Element into my web application. However, the texts from the integrated Payment Element are displayed in English by default such as Card number, Expiration, etc. I would like to display those texts in Japanese.
I have found that, for example, Card number element has a .Label class as you can see on Elements Appearance API so I did the following.
.Label {
font-size: 0;
}
.Label::after {
font-size: 1rem;
content: "カードナンバー";
}
This, however, did not replace Card number with カードナンバー.
Is Payment Element not available in Japanese?
Is there a way to customize Payment Element in Japanese?
If it is not possible, what other way would you suggest to collect payments in Japanese? I don't mind coding a lot as long as it works and is customizable.
I found the answer here on stackoverflow.
You need to set locale when initiating Payment Element on the client side like the following.
var elements = stripe.elements({
locale: 'ja',
// clientSecret: ...,
// appearance: ...,
});
I'm using the DialogFlow Fulfillment Inline Editor to build a quick prototype/POC Google Action. I'm trying to add a subtitle to a Card using the Node.js code below (based on the default Fulfillment Node.js code) and it's not showing up in the Simulator or on my Android phone. Otherwise, the Card is rendering properly - all other properties are being displayed, but no subtitle. I've also tried creating the Card separately and setting the subtitle property directly (card.subtitle = 'The Subtitle';), but that also did not work. There is no 'subtitle' being returned in the response data, and there are no errors being logged (either in the "ERRORS" tab or the "View logs").
agent.add(new Card({
imageUrl: 'https://example.org/images/logo.png]',
title: `${titleCase(theTitle)}`,
subtitle: 'The Subtitle',
text: `${theText}`,
buttonText: 'Get More Information',
buttonUrl: 'https://example.org/info'
}));
Thoughts on what might be going on here?
There is no such thing as subtitle for a Card to my knowledge. You are probable confounding with the BasicCard from the Actions On Google library which does have a subtitle property.
Hope it helps.
I am integrated dialog flow and messenger by using nodejs this is working fine for text exchange. I am confused about creating a card in messenger. Can anyone please help in this?
I have integrated the facebook messenger bot with the website. When customer visit the page that bot will provide help. I want to show the card in that bot. Please provide reference or solution for this requirement. Please see this img Like this I want to show
I'm assuming by messsenger, you mean Facebook Messenger?
To use a Basic Card with Google Assistant, you first must check that the screen output supports use of the card UI. You can do this with:
if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
return;
}
After you've tested whether the screen supports use of a basic card, you can create a new instance of the Basic Card class with code like:
// Create a basic card
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and
most other unicode characters including emoji 📱. Basic cards also support
some markdown formatting like *emphasis* or _italics_, **strong** or
__bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
things like line \nbreaks`, // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
subtitle: 'This is a subtitle',
title: 'Title: this is a title',
buttons: new Button({
title: 'This is a button',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://example.com/image.png',
alt: 'Image alternate text',
}),
display: 'CROPPED',
}));
More info is available via Google's documentation.
I cannot seem to find a way to pre-populate the email address in the stripe payment popup. However this weekend I signed up for two accounts on websites that use stripe payments and I realized those websites had my email pre-populated in the stripe dialog iframe box. So I know there must be a way but I am unsure of how to do that. The docs don't define that property.
Can someone explain how this is done using the javascript API and the basic Stripe dialog?
If you're using Simple Checkout you pass the email in data-email like this:
<form action="/charge" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-image="/img/documentation/checkout/marketplace.png"
data-name="Stripe.com"
data-description="2 widgets"
data-amount="2000"
data-email="customer#email.com"
data-locale="auto">
</script>
</form>
If you're using Custom Checkout you pass the email in the email parameter to handler.open():
handler.open({
name: 'Stripe.com',
description: '2 widgets',
amount: 2000,
email: "customer#email.com"
});
If you want to dynamically set the email (for Simple Checkout ) using js you must dynamically create the whole script element to make sure it loads properly. This can be done like this:
//create our stipe script element
var stripescript = document.createElement('script'); //create script element
//dynamicaly load stripe checkout attributes
stripescript.setAttribute('src','https://checkout.stripe.com/checkout.js');
stripescript.setAttribute("data-key","[YOUR STRIPE TOKEN]" )
stripescript.setAttribute("data-amount","90" )
stripescript.setAttribute("data-locale","auto")
stripescript.setAttribute("class","stripe-button")
stripescript.setAttribute("data-billing-address",true)
stripescript.setAttribute("data-panel-label","Update")
stripescript.setAttribute("data-currency","gbp")
// any other attributes you want to add stripescript.setAttribute("[name]","[value]")
//insert script element inside of div or an other element
document.getElementById('[ID OF ELEMENT YOU WANT TO PUT THE FORM INTO]').appendChild(stripescript);
I'm using Stripe's checkout.js because it's so easy to setup and use. Is there a way to add coupons?
<script src="https://checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
Stripe Checkout does not currently support coupons. It's not listed in the documentation, for either the button or the custom integration.
One might wonder if there is some secret feature. However, using undocumented features, especially when it comes to your payment processor is a bad idea. Full stop.
This being Stack Overflow - let's keep digging!
Fire up jsfiddle. Paste your code into the html section. Open up developer tools so you can see network requests.
There is a en.json, which is a internationalized strings file. If there is an input for coupons, there ought to be a label saying "Enter Coupon Code" or something similar. There is none. (Sure, there is the possibility that Stripe decided to hard code this particular string, but that seems unlikely).
https://checkout.stripe.com/v3/data/languages/en.json
You can also see that inner.js is used to power the popup. Copy the source into a js beautifier and you find that there is no mention. In fact, you can see the code that parses the options and none of them have to do with coupons.
"lib/optionParser": function(exports, require, module) {
(function() {
var BOOLEAN_OPTIONS, DEFAULTS, STRING_OPTIONS, URL_OPTIONS, extractValue, helpers, toBoolean, _;
_ = require("vendor/lodash");
helpers = require("lib/helpers");
DEFAULTS = {
currency: "usd",
allowRememberMe: true
};
BOOLEAN_OPTIONS = ["billingAddress", "shippingAddress", "notrack", "nostyle", "allowRememberMe", "allowPhoneVerification", "zipCode", "trace", "alipayReusable", "bitcoin"];
STRING_OPTIONS = ["key", "amount", "name", "description", "panelLabel", "currency", "email", "locale", "alipay"];
URL_OPTIONS = ["url", "referrer", "image"];
You can see how each of the options here align one to one with the options that available for custom integration, which map to the options for the button (you just need to use hyphens instead of camelcase)
At this point, you can keep digging if you want to convince yourself further, but I'd be reaching out to Stripe Support and making a feature request. Happy digging!
Checkout only creates the token. The coupon is applied to the customer after the token is returned to the server and customer is charged.
stripe.Customer.create(
source=token,
plan="basic_monthly",
email="payinguser#example.com",
coupon="coupon_ID"
)
Stripe have finally answered our prayers after having discount codes for Stripe checkout/payments on the roadmap for years
Discount codes are now here for Stripe checkout.
See here: https://stripe.com/docs/payments/checkout/discounts
You can also manually create it here: https://dashboard.stripe.com/coupons/create
For customer-facing promo codes, which is probably what we want, check out here: https://stripe.com/docs/billing/subscriptions/discounts/codes
(Technically, coupons are merchant-facing and promo codes are customer-facing)
If you want to pass a coupon code to your back end, you can just add an input field for it within the form. It won't alter the amounts in the pop-up form from stripe however, unless you wanted to get sophisticated and call additional javascript to check the parameters of the entered coupon code and change the stripe script parameters.
You can include any inputs you need within the form tags so long as they are not used by stripe.
<form action="/your-server-side-code" method="POST">
Coupon Code: <input type="text" name="coupon_code">
<br>
<script src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button" data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG" data-amount="2000" data-name="Demo Site" data-description="2 widgets ($20.00)" data-image="/128x128.png">
</script>
</form>
This maybe a new Stripe feature, use PaymentLinks and you can use the QueryString parameters like this.
https://buy.stripe.com/9AQ4gm66D7rl4129AD?prefilled_promo_code=SPORTISTAPP50