Google Pay
To use Headless checkout to accept payments via Google Pay:
- Add the handling of the
show_fieldsevent for displaying additional fields.
Example:
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
case 'show_fields':
this.handleShowFieldsAction(nextAction);
}
});
- Add the
psdk-payment-formcomponent to the HTML markup of the payment UI to display additional fields.
Example:
Copy
- html
@if (showAdditionalFields) {
<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay" />
}
- Add the handling of the event for displaying a button to pay via Google Pay.
Example:
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
...
case 'special_button': {
if (nextAction.data.buttonName === 'google-pay') {
showGoogleButton = true;
}
}
}
});
- Add the component of the Google Pay button to the HTML markup of the payment UI.
Example:
Copy
- html
@if (showGoogleButton) {
<psdk-google-pay-button></psdk-google-pay-button>
}
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Found a typo or other text error? Select the text and press Ctrl+Enter.
