Building a Checkout Page

Needless to say, there are several ways in which customers can make a payment. You may already have familiarized yourself with card payments and the steps needed to collect a user’s card information in your checkout page. You may, however, want to offer your customers the choice of paying with a payment method other than cards (like bank transfers or e-Wallets). If so, you can extend your checkout page to show a list of all payment methods that customers can pay with.

Showing a List of Additional Payment Methods

If you allow your customers to pay using payments methods other than cards, then you can extend your checkout page to show a list of payment methods that customers can pay with. To do so, invoke the Retrieve Supported Payment Methods API request. The data that is returned includes all payment methods supported by the default provider defined in the business unit used in the transaction request.

Here’s a sample response.

[  
   {  
      "configuration_id":"5fe0e7ea-2607-4965-94f7-3d4b8e46b81c",
      "configuration_name":"My provider configuration",
      "provider_id":"5fe0e7ea-2607-4965-94f7-3d4b8e46b81c",
      "provider_name":"PayUPoland",
      "supported_payment_methods":[  
         {  
            "display_name":"Płacę później",
            "vendor":"dp",
            "source_type":"bank_transfer",
            "status":"available",
            "logo_url":"https://static.payu.com/images/mobile/logos/pbl_dp.png",
            "amounts":[  
               {  
                  "min":1000,
                  "max":5000,
                  "currency":"USD"
               }
            ]
         }
      ],
      "result":{  
         "status":"Succeed"
      }
   }
]

Filtering the Payment Method List

Notice that the response data includes a status property. A status of available tells you that the payment method is available for use. A status of temporarily_unavailable indicates that the payment method is not available at the moment, for example due to server downtime or closed office hours. A status of disabled indicates that the payment method is not configured for use in your provider account.

Here’s an example.

...
{
  ...  
  "supported_payment_methods": [
    {
      "display_name": "Płacę później",
      "vendor": "dp",
      "source_type": "bank_transfer",
      "status": "available" // The payment method is available and can be used
      ...
    }
    ...
  ]
} 

You can use the status property to show only those payment methods that the user can actually pay with at the moment of checkout.

Combing Cards and Alternative Payment Methods in a Single Checkout Page

There are two details that may not be apparent from the onset, but need to be considered when offering both card payments and alternative payment methods on the same checkout page.

The first thing to consider is authentication. The Javascript API and Secure Fields Form libraries are client-side libraries and thus require that you use the public key in the authentication process. The Retrieve Supported Payment Methods API request, in contrast, is a server-side call and thus requires the private key to be passed in the request header.

The second item you must be aware off, is the business unit handling the transaction request. Recall that you cannot create payment optimization rules for alternative payment methods. This means that PaymentsOS will always direct payments that do not use cards, to the default provider defined in your business unit configuration. If your default provider is not suited to handle the request, then you must create a separate business unit with a default provider dedicated to handling alternative payment methods. Make sure to pass the identifier (app-id) of this business unit in the header of the Retrieve Supported Payment Methods API request.

Code Samples

To see an example of how to create a checkout page, check out our project on GitHub.