Google Pay
How to set it up
To use Headless checkout to accept payments via Google Pay:
- Add the handling of the
show_fieldsevent for displaying additional fields.
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- Add the
psdk-payment-formcomponent to the HTML markup of the payment UI to display additional fields.
Copy
- html
1<psdk-payment-form></psdk-payment-form>
2<psdk-submit-button text="Pay" />
- Add the handling of the event for displaying a button to pay via Google Pay.
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 ...
4 case 'special_button': {
5 if (nextAction.data.buttonName === 'google-pay') {
6 showGoogleButton = true;
7 }
8 }
9 }
10});
- Add the component of the Google Pay button to the HTML markup of the payment UI.
Copy
- html
1@if (showGoogleButton) {
2 <psdk-google-pay-button></psdk-google-pay-button>
3}
One-click payment
One-click payment allows users to pay with Google Pay, a familiar and secure native payment method, on supported devices. To configure one-click payment, update the SDK initialization script as shown below:
Copy
- typescript
1const config: InitialOptions = {
2 isWebview: false,
3 theme: 'default',
4 language: parameters.language,
5 isGooglePayInstantFlowEnabled: true
6};
7
8await headlessCheckout.init(config);
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.
