#Shahana Joy
sour idol
floral rover
request Id means?
thick verge
I mean the one where you see the difference in the amounts
floral rover
Yes, I took this req_ID from response hear
thick verge
that's a GET request
but in stripe the amount shown as $46.68
where do you see that?
thick verge
where in Stripe?
floral rover
I will create a new and send you.. just a sec
thick verge
ok
floral rover
key=pk_test_51HI3HAEFMLOkx7yAWxKt1NHU0733873tuh09SQeL1IzEcOfUtf2AzZ3dAePiKXjsvZ19lL3l6tN9ZmqqBzNTymQ000h9uW3FM3&type=deferred_intent&locale=en-US&deferred_intent[mode]=payment&deferred_intent[amount]=26725&deferred_intent[currency]=usd&referrer_host=localhost%3A4200¤cy=usd
please find this req body
deferred_intent[amount]: 26725
thick verge
let's stop for a sec
floral rover
Now I will do the payment with testcard
thick verge
would you mind sharing your code please
floral rover
Sure, will wait
thick verge
would you mind sharing your code please?
floral rover
sure
let val= 26725
const options = {
mode: 'payment',
amount: Number(val),
currency: 'usd',
paymentMethodCreation: 'manual',
// 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
}
};
const elements = this.stripe.elements(options);
this.paymentElement = elements.create('payment');
this.paymentElement.mount('#payment-element');
thick verge
ok so you're using deferred Payment Intents
ok
would you mind sharing your submit code?
floral rover
sure
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error: submitError} = await elements.submit();
if (submitError) {
this.handleError(submitError);
return;
}
const {error, paymentMethod} = await this.stripe.createPaymentMethod({
elements,
params: {
billing_details: {
name: this.nameonCard,
}
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the PaymentMethod. Show the error to your customer (for example, payment details incomplete)
this.handleError(error);
return;
}
this.pay(paymentMethod.id,)
});
ok now could you please share the pay function?
floral rover
pay function is used for our functionality
pay(tokenId: string) {
this.subService.paySubscription.paymentMethodToken = tokenId
this.subService.generatePayment( this.subService.paySubscription).subscribe(response => {
//alert(response);
console.log(response);
let id=sessionStorage.getItem('billingId')
if(response) {
if(response.paymentIntentId){
let reqObj={"RemainingBalance":0,"purchasereceipt":response.paymentIntentId}
this.subService.upadateBillingDetails(reqObj,id).subscribe(response => {
if(response){
this.router.navigate(['successPayment'], {});
}
});
} else {
this.showErrorMsg =true
}
}else {
this.showErrorMsg =true
}
});
}
thick verge
since you're using the deferred PI, the amount shown there could be different then the one created by the backend
you're just passing the PaymentMethod and doing the payment in the backend
which is really not the best integration path with subscriptions
please refer to this doc for a better understanding of what's the recommended way of integrating with Subscriptions+PaymentElement https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements
floral rover
ohh so you mean it is different because , its done from backend?
thick verge
ohh so you mean it is different because , its done from backend?
the amount is being decided by the backend right?