piyushjain_api | Stripe Developers | Page 1

empty treeBOT Nov 21, 2025, 9:21 AM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1441357814017818785

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

piyushjain_api, 25 minutes ago, 51 messages
piyushjain_code, 3 days ago, 8 messages

#

uncut bloom Nov 21, 2025, 9:22 AM

#

Hello, I have enable Twint from Connected account as well as from platform account.

#

now when i create Payment intenet in response i can see
"payment_method_options": {
"card": {
"installments":
null,
"mandate_options":
null,
"network":
null,
"request_three_d_secure":
"automatic",
},
"klarna": {
"preferred_locale":
null,
},
"twint": {},
},
"payment_method_types": [
"card",
"klarna",
"twint",
],

#

but on Frontend QR is not loaded.

stable tusk Nov 21, 2025, 9:27 AM

#

👋 Happy to help

#

Checking the PaymentIntent you've shared...

#

So the PaymentIntent has Twint included indeeed

#

but on Frontend QR is not loaded.
Can you share more details about this ?

uncut bloom Nov 21, 2025, 9:29 AM

#

yeah sure

#

private async setupPaymentRequest(amount: number, clientSecret: string) {
if (!this.stripe) {
return;
}
const paymentRequest = this.stripe.paymentRequest({
country: 'CH',
currency: 'chf',
total: {
label: 'Amount',
amount: amount,
},
requestPayerName: true,
requestPayerEmail: true,
});

const result = await paymentRequest.canMakePayment();

if (result) {
  const paymentElement = this.elements.create('payment', {
    layout: 'accordion'
  });
  paymentElement.mount('#payment-element');
  const prButton = this.elements.create('paymentRequestButton', {
    paymentRequest,
    style: {
      paymentRequestButton: {
        type: 'buy',
        theme: 'light-outline',
        height: '40px',
      },
    },
  });

  prButton.mount('#payment-request-button');

  paymentRequest.on('paymentmethod', (ev) =>
    this.handlePaymentMethod(ev, clientSecret)
  );

  this.buttonLoader.set(false);
} else {
  const prBtn = document.getElementById('payment-request-button');
  if (prBtn) prBtn.style.display = 'none';
  this.errorMessage = "Failed to get pay button from stripe";
  this.buttonLoader.set(false);
}

}

#

@if(buttonLoader()){
<div class="loader">
<ion-spinner name="crescent"></ion-spinner>
</div>
}

this is html

stable tusk Nov 21, 2025, 9:30 AM

#

I mean can you share a screenvideo recording of the payment flow showing where it's stuck

#

and not getting the QRCode

uncut bloom Nov 21, 2025, 9:31 AM

#

ok

#

hello

stable tusk Nov 21, 2025, 9:43 AM

#

Thanks for sharing, checking...

stable tusk Nov 21, 2025, 9:44 AM

#

uncut bloom

I'm not seeing Stripe Element here 🤔

#

Can you share the session id from the call sessions in your network tabs ?

uncut bloom Nov 21, 2025, 9:45 AM

#

sure

#

📎 message.txt

stable tusk Nov 21, 2025, 9:46 AM

#

Alos, are you combining ELements with Payment Request Button ?

uncut bloom Nov 21, 2025, 9:46 AM

#

yes for google pay and apple pay

stable tusk Nov 21, 2025, 9:50 AM

#

Not sure if that's related, but payment request button is deprecated and is using old APIs

#

May I ask you to migrate to Express Checkout Element ?

#

https://docs.stripe.com/elements/express-checkout-element/migration

uncut bloom Nov 21, 2025, 9:53 AM

#

not yet

#

let me try quickly

#

just Ui change right

empty treeBOT Nov 21, 2025, 9:55 AM

#

stable tusk Nov 21, 2025, 9:55 AM

#

Also do you have a hosted dev website that we can test and see why the PaymentElement isn't rendering ?

uncut bloom Nov 21, 2025, 9:56 AM

#

yes

#

https://qr.tapgo.ch/9lcs9h/2/Interieur 1/

#

just add product in cart and go to checkout and click on pay

slender umbra Nov 21, 2025, 9:58 AM

#

hi! I'm taking over this thread. give me a few minutes to catchup.

uncut bloom Nov 21, 2025, 10:01 AM

#

sure

slender umbra Nov 21, 2025, 10:14 AM

#

is this where you expect TWINT to appear?

uncut bloom Nov 21, 2025, 10:15 AM

#

yes exactly

#

in desktop it should show qr and in mobile it should show Twint and it will open twint app

slender umbra Nov 21, 2025, 10:19 AM

#

this modal is using the Payment Request Button, and can only show GooglePay and ApplePay. so it's expected you don't see Twint.

#

or are you using the Payment Element, but it's not showing at all?

uncut bloom Nov 21, 2025, 10:20 AM

#

private async setupPaymentRequest(amount: number, clientSecret: string) {
if (!this.stripe) {
return;
}
const paymentElement = this.elements.create('payment', {
layout: 'tabs'
});
paymentElement.mount('#payment-element');

const paymentRequest = this.stripe.paymentRequest({
  country: 'CH',
  currency: 'chf',
  total: {
    label: 'Amount',
    amount: amount,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});

const result = await paymentRequest.canMakePayment();

if (result) {

  const prButton = this.elements.create('paymentRequestButton', {
    paymentRequest,
    style: {
      paymentRequestButton: {
        type: 'buy',
        theme: 'light-outline',
        height: '40px',
      },
    },
  });

  prButton.mount('#payment-request-button');

  paymentRequest.on('paymentmethod', (ev) =>
    this.handlePaymentMethod(ev, clientSecret)
  );

  this.buttonLoader.set(false);
} else {
  const prBtn = document.getElementById('payment-request-button');
  if (prBtn) prBtn.style.display = 'none';
  this.errorMessage = "Failed to get pay button from stripe";
  this.buttonLoader.set(false);
}

}

#

@if(buttonLoader()){
<div class="loader">
<ion-spinner name="crescent"></ion-spinner>
</div>
}

this is html

#

i wanted to show both

#

Twint as well as Google and apple pay

slender umbra Nov 21, 2025, 10:22 AM

#

so both the PaymentRequestButton and the PaymentElement should be displayed in that modal, but for now you only see the PaymentRequestButton. is that correct?

uncut bloom Nov 21, 2025, 10:22 AM

#

Yes correct

#

In sessionObject json response we should able to get Twint related object right

#

in this session response.

ordered_payment_method_types_and_wallets
:
["card", "apple_pay"]

📎 message.txt

#

hi

slender umbra Nov 21, 2025, 10:41 AM

#

sorry for the delay, looking into this

uncut bloom Nov 21, 2025, 10:42 AM

#

Np

slender umbra Nov 21, 2025, 10:44 AM

#

can you share your code that is calling stripe.elements()?

uncut bloom Nov 21, 2025, 10:46 AM

#

yes

#

private async setupPaymentRequest(amount: number, clientSecret: string) {
if (!this.stripe) {
return;
}
const paymentElement = this.elements.create('payment', {
layout: 'tabs'
});
paymentElement.mount('#payment-element');

const paymentRequest = this.stripe.paymentRequest({
  country: 'CH',
  currency: 'chf',
  total: {
    label: 'Amount',
    amount: amount,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});

const result = await paymentRequest.canMakePayment();

if (result) {

  const prButton = this.elements.create('paymentRequestButton', {
    paymentRequest,
    style: {
      paymentRequestButton: {
        type: 'buy',
        theme: 'light-outline',
        height: '40px',
      },
    },
  });

  prButton.mount('#payment-request-button');

  paymentRequest.on('paymentmethod', (ev) =>
    this.handlePaymentMethod(ev, clientSecret)
  );

  this.buttonLoader.set(false);
} else {
  const prBtn = document.getElementById('payment-request-button');
  if (prBtn) prBtn.style.display = 'none';
  this.errorMessage = "Failed to get pay button from stripe";
  this.buttonLoader.set(false);
}

}

slender umbra Nov 21, 2025, 10:48 AM

#

you already shared this code, but it doesn't show the call to stripe.elements()

uncut bloom Nov 21, 2025, 10:48 AM

#

Let me check

#

private setupElements(clientSecret: string) {
if (!this.stripe) {
return;
}
this.elements = this.stripe.elements({
clientSecret,
appearance: {
theme: 'stripe',
variables: {
colorPrimary: '#fbc02d',
colorBackground: '#ffffff',
colorText: '#000000',
colorDanger: '#df1b41',
fontFamily: 'system-ui',
spacingUnit: '6px',
borderRadius: '8px',
},
rules: {
'.Input': { borderColor: '#fbc02d', color: '#000000' },
'.Tab': { color: '#fbc02d' },
'.Tab--selected': { borderColor: '#fbc02d', color: '#fbc02d' },
'.Block': { backgroundColor: '#ffffff' },
'.Label': { color: '#fbc02d' },
'.Link': { color: '#fbc02d' },
'.Error': { color: '#df1b41' },
},
}
});

// Optional: mount card input instead of payment request
// const paymentElement = this.elements.create('payment', { layout: { type: 'tabs' } });
// paymentElement.mount('#payment-element');

}

#

/** Stripe Payment Setup Start */
private async initializeStripe(accountId: string) {
const publishableKey = environment.STRIPE_PUBLIC_KEY;
const stripeInstance = await this.createStripeInstance(publishableKey, accountId);

if (!stripeInstance) return;

const amount = this.data.totalAmount * 100;
const paymentModel = { totalAmount: this.data.totalAmount, platformFee: this.data.platformFee };

this.paymentService.getSecretKey(this.store.id, paymentModel).subscribe(async (res) => {
  const clientSecret = res.secret;

  this.setupElements(clientSecret);

  this.setupPaymentRequest(amount, clientSecret);
}, (err: any) => {
  this.errorMessage = "Could not retrive stripe keys";
  this.buttonLoader.set(false);
});

}

this is the first method.. which call setupElement and setupPaymentRequest

empty treeBOT Nov 21, 2025, 10:59 AM

#

uncut bloom Nov 21, 2025, 11:01 AM

#

Hello

shadow onyx Nov 21, 2025, 11:20 AM

#

👋 Hi there. To summarise, you're currently using the Payment Request Button to show Google Pay. You also want to show other payment options, including TWINT, which would require using the Payment Element.

#

From the code you shared, you have commented out the code that creates and mounts the Payment Element:

// Optional: mount card input instead of payment request
// const paymentElement = this.elements.create('payment', { layout: { type: 'tabs' } });
// paymentElement.mount('#payment-element');

uncut bloom Nov 21, 2025, 11:23 AM

#

private async setupPaymentRequest(amount: number, clientSecret: string) {
if (!this.stripe) {
return;
}
const paymentElement = this.elements.create('payment', {
layout: 'tabs'
});
paymentElement.mount('#payment-element');

const paymentRequest = this.stripe.paymentRequest({
  country: 'CH',
  currency: 'chf',
  total: {
    label: 'Amount',
    amount: amount,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});

const result = await paymentRequest.canMakePayment();

if (result) {

  const prButton = this.elements.create('paymentRequestButton', {
    paymentRequest,
    style: {
      paymentRequestButton: {
        type: 'buy',
        theme: 'light-outline',
        height: '40px',
      },
    },
  });

  prButton.mount('#payment-request-button');

  paymentRequest.on('paymentmethod', (ev) =>
    this.handlePaymentMethod(ev, clientSecret)
  );

  this.buttonLoader.set(false);
} else {
  const prBtn = document.getElementById('payment-request-button');
  if (prBtn) prBtn.style.display = 'none';
  this.errorMessage = "Failed to get pay button from stripe";
  this.buttonLoader.set(false);
}

}

this is written inside this

#

very next method

#

just move that commneted code in this

shadow onyx Nov 21, 2025, 11:29 AM

#

OK, and do you see the Payment Element on the page? Do you see anything in the browser console?

shadow onyx Nov 21, 2025, 11:52 AM

#

I do see the Payment Element on your page, with just card as an option. Looking into why TWINT doesn't appear, as your Payment Intent creation does look correct…

#

If you're still having this issue, can you please share a Payment Intent ID?

empty treeBOT Nov 21, 2025, 11:59 AM

#

shadow onyx Nov 21, 2025, 11:59 AM

#

OK, so it looks like because you're not in Switzerland, you will not see TWINT on the Payment Element: https://docs.stripe.com/payments/twint

#

The customer has to be in Switzerland to see it

lone junco Nov 21, 2025, 12:04 PM

#

👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!

uncut bloom Nov 21, 2025, 12:06 PM

#

yes , i m not in Switzerland thats why i am not able to see

#

thats correct

#piyushjain_api