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
<psdk-saved-methods></psdk-saved-methods>
- Add the handling of the event for the saved payment method selection.
Copy
- typescript
const savedMethods = document.querySelector('psdk-saved-methods');
savedMethods?.addEventListener('savedMethodSelected', async (event) => {
this.showForm = true;
});
- Initialize the payment UI.
Copy
- typescript
savedMethods?.addEventListener('savedMethodSelected', async (event) => {
await headlessCheckout.form.init({
paymentWithSavedMethod: true, // Payment via saved method
savedMethodId: event.detail.savedMethodId,
paymentMethodId: event.detail.paymentMethodId,
returnUrl: 'returnUrl',
});
});
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: March 5, 2025Found a typo or other text error? Select the text and press Ctrl+Enter.
