Search Overlay
Searchbox clear search filters ESC
Filter PreferencesClear

No results found

showButtons Function

The showButtons function loads the payment button for a specific payment method into your page according to a set of payment button options. You must call the init function before you call showButtons. Internally, showButtons first performs the canMakePayment function, to check that payment is possible using the device being used to make the purchase. Then, when the payment button is clicked, the (for example, Apple Pay) payment session is created, the merchant is validated and, if everything is OK, the payment sheet is displayed.

The function can be called with or without defining the button options, and has the signatures below:

paysafe.request.showButtons(callback)  // Using the default button options

paysafe.request.showButtons(buttonOptions, callback)  // Using explicit button options

The function parameters are described below.

  Required Type Description
buttonOptions   false object array

Options for creating and displaying the payment button.If omitted, these default arguments are used:

  • paymentMethod = "APPLEPAY"
  • selector = "x-paysafe-apple-pay-button"
  • color = "black"
  • type = "pay"
paymentMethod true string

The payment method:

APPLEPAY
selector true string Id of HTML element replaced by button
color false string

The button color. Choose from:

  • "black" - the default
  • "white"
  • "white-outline"
type false string

The button type.Choose from:

  • "pay" - the default
  • "buy"
  • "donate"
supportedNetworks false string array

Specifies the supported card brands that can be accepted. Possible values are:

  • AMEX
  • MASTERCARD
  • VISA
  • DISCOVER
  • INTERAC

This is case-insensitive.
callback   true

function(displayedPaymentMethods, error) {...}

The onTokenization callback must be set before calling showButtons, otherwise this callback will return an error.
displayedPaymentMethods false string array List of all payment methods displayed on the merchant site.
error N/A object Error object indicating failure reason: 9001, 9003, 9013, 9015, 9023, 9063, 9065, 9077, 9080, 9084, 9085, 9086, 9087, 9088, 9091, 9092
{throws}       Throws an exception with the following errors: 9004, 9014, 9067.
{return} false undefined    

Apple Pay Example

This example in the TEST environment shows how to specify the appearance of the payment button. It does not include the init or onTokenization code.

<html>

<head>

  <script type="text/javascript" src="https://hosted.paysafe.com/request/v1/latest/paysafe.request.min.js"></script>

</head>

<body>

  ...

  <div id="x-paysafe-apple-pay-button"></div>

  ...

  <script>

    ...

      var appleButtonOptions = {

        paymentMethod: "APPLEPAY",

        selector: "x-paysafe-apple-pay-button",

        color: "white-outline",

        type: "buy"

      };

      paysafe.request.showButtons([appleButtonOptions], function (displayedPaymentMethods, error) {

        if (error) {

          // handle error

        }

      });

    ...

  </script>

</body>

</html>

Visit this site to view guidelines on the appearance of the Apple Pay button.

On this Page