How to set up payment with saved methods
To set up payment with the saved methods:
- Add the
psdk-saved-methodscomponent to the HTML markup of the payment UI to display the list of saved payment methods.
Copy
- html
1<psdk-saved-methods></psdk-saved-methods>
- Add the handling of the event for the saved payment method selection.
Copy
- typescript
1const savedMethods = document.querySelector('psdk-saved-methods');
2savedMethods?.addEventListener('savedMethodSelected', async (event) => {
3 this.showForm = true;
4});
- Initialize the payment UI.
Copy
- typescript
1savedMethods?.addEventListener('savedMethodSelected', async (event) => {
2 await headlessCheckout.form.init({
3 paymentWithSavedMethod: true, // Payment via saved method
4 savedMethodId: event.detail.savedMethodId,
5 paymentMethodId: event.detail.paymentMethodId,
6 returnUrl: 'returnUrl',
7 });
8});
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Continue reading
Last updated: June 3, 2025Found a typo or other text error? Select the text and press Ctrl+Enter.
