Express Checkout WebElement

The Express Checkout WebElement quickly adds digital wallets like Apple Pay and Google Pay to your checkout page and accepts payments through one-click payment buttons.

Below is an example of how these one-click payment buttons will be displayed.

Create an Express Checkout WebElement

Use the following method to create an instance of the Express Checkout WebElement. The options parameter allows you to customize the Express Checkout WebElement.

var expressCheckoutWebElement = webElementGroup.create('expressCheckout', {
  layout: 'horizontal',    
  buttonType: {
      googlePay: 'book',
      applePay: 'book',
  },
  buttonTheme: {
      applePay: 'black',
      googlePay: 'black'
  },
  buttonHeight: 55,
  paymentMethodOrder: ['apple_pay', 'google_pay'],
  wallets: {
    applePay: 'always',
    googlePay: 'always',
    emailRequired: false,
    phoneNumberRequired: false
  }
});

Mount the Express Checkout WebElement

Once the Express Checkout WebElement is created, mount it to a DOM element in your page by specifying its ID.

expressCheckoutWebElement.mount('#express-checkout-element');

Listening to the Events from the Express Checkout WebElement

Our ExpressCheckout Web Element triggers certain events based on actions performed by the user or internally by the SDK.

"Ready" event

This ready will be triggered when the Express Checkout WebElement has been rendered an is ready to receive user inputs

expressCheckoutWebElement.on('ready', (event) => {
 // Example of a "ready" event
 //	{
 // 	"avaiablePaymentMethods": {
 //   	"paymentMethodTypes": [],
 //     "wallets": {
 //       "googlePay": true,
 //       "applePay": true
 //  		 }
 //		 },
 //		 "webElement": "payment"
 //	}
  
});

"Click" event

This click will be triggered when the user clicks on one of the Express Checkout wallet payment buttons. Use this event to configure the payment interface.

expressCheckoutWebElement.on('click', (event) => {
 //....
 // TODO: You can add logic to update the payment sheet here:
 // let options = {....}
 // expressCheckout.updatePaymentSheet(options) 
 //
});

"Information" event

This information will be triggered when the when a user authorizes a payment via Google Pay or Apple Pay. All the information collected from the user through the Google Pay or Apple Pay payment sheet will shared on this "information" event.

expressCheckoutWebElement.on('information', (event) => {
 // Example of a Google Pay Information event (When configured with setting to require billing/shipping/phone/email)
 // {
 //   "type": "card",
 //   "card": {
 //     "brand": "visa",
 //     "last4": "1111",
 //     "wallet": "google_pay"
 //   },
 //   "billingDetails": {
 //     "name": "Card Holder Name",
 //     "email": "[email protected]",
 //     "phone": "+1 650-555-5555",
 //     "address": {
 //       "city": "Mountain View",
 //       "country": "US",
 //       "line1": "1600 Amphitheatre Parkway",
 //       "line2": "",
 //       "postalCode": "94043",
 //       "state": "CA"
 //     }
 //   },
 //   "shippingDetails": {
 //     "email": "[email protected]",
 //     "address": {}
 //   },
 //   "shippingRate": {},
 //   "lineItems": [
 //     {
 //       "name": "Subtotal",
 //       "amount": "0.00"
 //     }
 //   ],
 //   "totalAmount": "0.00",
 //   "webElement": "payment"
 // }
});

"Cancel" event

This cancel will be triggered when a user cancels a payment on the Payment WebElement (e.g. when closing an apple pay or google pay payment sheet),

paymentWebElement.on('cancel', (event) => {
  // Example of a "cancel" event
  // {
  //   "webElement": "payment"
  // }
});

Listen to the Express Checkout Payment Token Generation

When a user finishes the authorizing a payment via Google Pay or Apple Pay, a Payment Token is generated automatically and is sent via the "confirm" event.

expressCheckoutWebElement.on('confirm', (paymentToken) => {
   if(paymentToken.token) {
     //Payment Token received
     // TODO: Send to your backend to complete the payment
     
   } else if(paymentToken.error) {
     //Error received
     // TODO: Handle ERROR
   }
});