#Shahana Joy
hazy tiger
Yes please
I added <script src="https://js.stripe.com/v3/"></script> in my index.html file as well as
package.json contain "stripe": "^12.12.0",
hexed walrus
Ok, so not some angular-specific SDK?
Could you please share a larger piece of code where you call it?
And also the screenshot of the error
hazy tiger
Sure
createStripeToken = async () => {
const { token, error } = await this.stripe.createToken(this.paymentElement);
if (token) {
this.onSuccess(token);
} else {
this.onError(error);
}
}
I created payment element like this
.ts
this.stripe = Stripe(environment.stripePublishKey);
const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {
theme: 'stripe'
},
layout: "tabs",
variables: {
colorPrimary: '#42bfb5',
colorBackground: '#ffffff',
colorText: '#30313d',
colorDanger: '#df1b41',
fontFamily: 'Segoe UI',
spacingUnit: '2px',
borderRadius: '4px',
// See all possible variables below
}
};
this.paymentElement = elements.create('payment');
this.paymentElement.mount('#payment-element');
this.paymentElement.addEventListener('change', this.cardHandler);
in html
<form id="payment-form" (ngSubmit)="createStripeToken()">
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>
<div class="mt-3 d-flex justify-content-center">
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay now ${{amountToPay}}</span>
</button>
</div>
<div id="error-message">
<!-- Display error message to your customers here -->
</div>
</form>
Are you sure the this.paymentElement is not empty?
hazy tiger
before I got this. undefind
when implement createToken as async createStripeToken() {
then I changed my code in to createStripeToken = async () => {
and this. is not empty
hexed walrus
Yes, because arrow functions are accessing this from the parent scope.
Is it working now?
hazy tiger
Do you have any alternative solution to do the same, CreateToken
No it is not working
hexed walrus
Actually Tokens and Sources is an old way of charging cards. You can look at this example: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements
We don't have a native support for Angular, but you will get an idea how to implement it. There might be some third party Stripe SDKs for Angular too.
hazy tiger
Thank you let me go through this docs
indigo ridgeBOT
hexed walrus
Happy to help!