cristianoliveira/express-checkout-button.html

## express-checkout-button.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Express checkout example</title>
    <script charset="utf-8">
      // API Key from https://me.sumup.com/pt-br/developers section OAuth
      // That should be a publishable key
      // With this API key we can identify the merchant
      const sumup = Sumup('pBdavQAc_MnAPFBF7cj2cU9HdyVk')

      // SumupPayment is analog to Payment Element
      const payment = sumup.payment('apple-pay');

      // See https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest
      // Throws an exception if paymentRequest is missing required data
      // For instance
      // for ApplePay
      //   required  merchantCapabilities;
      //   required supportedNetworks;
      //   required countryCode;
      //   required currencyCode;
      //   ...
      //
      // See: https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest
      //
      // For GooglePay
      //   required apiVersion & apiVersionMinor
      //   required merchantInfo
      //   ...
      //
      // See: https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest
      const paymentRequest = payment.paymentRequest(
      {
        // This data will be filled by data from our API
        // and will can be updated at any time
        //
        // country: "DE",
        // currency: "EUR",
        // total: {
        //   amount: 1000,
        //   label: "Payment to merchant X"
        // },
        requestShipping: true,
        shippingOptions: [
          {
            id: "free-shipping",
            label: "Free shipping",
            detail: "Arrives in 5 to 7 days",
            amount: 0
          }
        ]
      }
      )
      const paymentRequestElement = payment.element('express-checkout-button', paymentRequest)

      // https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/canMakePayment
      paymentRequest
        .canMakePayment()
        .then(isAvailable => {
          if (isAvailable) {
            paymentRequestElement
              .mount(document.querySelector('#express-button-handled'))
          } else {
            alert('This payment is not available')
          }
        })

      const cartDetails = {
        // the merchant shop order data
      }

      // Add event listeners
      paymentRequestElement.onEvent('change', (eventId, eventContext) => {
        // For instance
        if eventId === 'address-change' {
          // do something with address event context
          cartDetails.shippingAddress = eventContext.shippingAddress;
        }

        if eventId === 'contact' {
          // do something with address event context
          cartDetails.email = eventContext.email;
          // Handle custom validations. Maybe?
          if (handlePhoneNumberCollection(eventContext.phone)) {
            eventContext.complete('valid')
          } else {
            eventContext.complete('invalid')
          }
        }
      })

      paymentRequestElement.onEvent('submit', (eventContext) => {
        console.log(eventContext);
        setIsLoading(true);
      })

      paymentRequestElement.onEvent('response', (eventContext) => {
        console.log(eventContext);
        setIsLoading(false);
      })

      // Similar to Payment Request `show`
      // https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/show
      // This method will respond with the result of the payment attempt


      // PRE-CHECKOUT-CREATION
      // Enable the integration to create the order and checkoutId
      // right before we show/start the payment request.

      // api here refers to the merchant API client
      paymentRequest.onSubmit(async (paymentDetails) => {
        const order = await api.createOrder(cartDetails);
        const paymentToken = await api.createCheckout(order);

        // paymentToken has a reference to all
        const paymentResponse = await sumup.process(paymentToken, paymentDetails)
        // handle Payment response
        console.log({ paymentResponse })

        host.redirectToThankyouPage()
      })

      // OR another idea
      // paymentRequest.onSubmit(async (paymentDetails) => {
      //   const order = await api.createOrder(cartDetails);
      //   return api.createCheckout(order);
      // })

      paymentRequestElement.show()
      // AND should be able to abort
      // paymentRequestProcess.abort()


      // OR with custom button
      const customButton = document.querySelector('#express-button-handled')
      customButton.onclick = async (ev) => {
        ev.preventDefault();

        const order = await api.createOrder(cartDetails);
        const paymentToken = await api.createCheckout(order);

        // paymentToken has a reference to all
        const paymentResponse = await sumup.process(paymentToken, paymentDetails)
        // handle Payment response
        paymentRequest.show()
      }
    </script>
  </head>
  <body>
    <div id="express-button-handled" class="name"></div>

    <button id="custom-express-button" type="submit"></button>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Express checkout example</title>
	<script charset="utf-8">
	// API Key from https://me.sumup.com/pt-br/developers section OAuth
	// That should be a publishable key
	// With this API key we can identify the merchant
	const sumup = Sumup('pBdavQAc_MnAPFBF7cj2cU9HdyVk')

	// SumupPayment is analog to Payment Element
	const payment = sumup.payment('apple-pay');

	// See https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest
	// Throws an exception if paymentRequest is missing required data
	// For instance
	// for ApplePay
	// required merchantCapabilities;
	// required supportedNetworks;
	// required countryCode;
	// required currencyCode;
	// ...
	//
	// See: https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest
	//
	// For GooglePay
	// required apiVersion & apiVersionMinor
	// required merchantInfo
	// ...
	//
	// See: https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest
	const paymentRequest = payment.paymentRequest(
	{
	// This data will be filled by data from our API
	// and will can be updated at any time
	//
	// country: "DE",
	// currency: "EUR",
	// total: {
	// amount: 1000,
	// label: "Payment to merchant X"
	// },
	requestShipping: true,
	shippingOptions: [
	{
	id: "free-shipping",
	label: "Free shipping",
	detail: "Arrives in 5 to 7 days",
	amount: 0
	}
	]
	}
	)
	const paymentRequestElement = payment.element('express-checkout-button', paymentRequest)

	// https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/canMakePayment
	paymentRequest
	.canMakePayment()
	.then(isAvailable => {
	if (isAvailable) {
	paymentRequestElement
	.mount(document.querySelector('#express-button-handled'))
	} else {
	alert('This payment is not available')
	}
	})

	const cartDetails = {
	// the merchant shop order data
	}

	// Add event listeners
	paymentRequestElement.onEvent('change', (eventId, eventContext) => {
	// For instance
	if eventId === 'address-change' {
	// do something with address event context
	cartDetails.shippingAddress = eventContext.shippingAddress;
	}

	if eventId === 'contact' {
	// do something with address event context
	cartDetails.email = eventContext.email;
	// Handle custom validations. Maybe?
	if (handlePhoneNumberCollection(eventContext.phone)) {
	eventContext.complete('valid')
	} else {
	eventContext.complete('invalid')
	}
	}
	})

	paymentRequestElement.onEvent('submit', (eventContext) => {
	console.log(eventContext);
	setIsLoading(true);
	})

	paymentRequestElement.onEvent('response', (eventContext) => {
	console.log(eventContext);
	setIsLoading(false);
	})

	// Similar to Payment Request `show`
	// https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/show
	// This method will respond with the result of the payment attempt


	// PRE-CHECKOUT-CREATION
	// Enable the integration to create the order and checkoutId
	// right before we show/start the payment request.

	// api here refers to the merchant API client
	paymentRequest.onSubmit(async (paymentDetails) => {
	const order = await api.createOrder(cartDetails);
	const paymentToken = await api.createCheckout(order);

	// paymentToken has a reference to all
	const paymentResponse = await sumup.process(paymentToken, paymentDetails)
	// handle Payment response
	console.log({ paymentResponse })

	host.redirectToThankyouPage()
	})

	// OR another idea
	// paymentRequest.onSubmit(async (paymentDetails) => {
	// const order = await api.createOrder(cartDetails);
	// return api.createCheckout(order);
	// })

	paymentRequestElement.show()
	// AND should be able to abort
	// paymentRequestProcess.abort()


	// OR with custom button
	const customButton = document.querySelector('#express-button-handled')
	customButton.onclick = async (ev) => {
	ev.preventDefault();

	const order = await api.createOrder(cartDetails);
	const paymentToken = await api.createCheckout(order);

	// paymentToken has a reference to all
	const paymentResponse = await sumup.process(paymentToken, paymentDetails)
	// handle Payment response
	paymentRequest.show()
	}
	</script>
	</head>
	<body>
	<div id="express-button-handled" class="name"></div>

	<button id="custom-express-button" type="submit"></button>
	</body>
	</html>