Clearent Hosted Payment Page

Examples

Overview Security Considerations Configuration Styling / Branding Digital Wallets Examples

After you have looked at some examples below, be sure to head on over to our live demo page and try out your own examples!

Basic "One Line of Code" Example

At a bare minimum, you must:

If you don't provide an amount, an amount field will be included in the payment popup. Generally, this would only be used when taking donations and not accepting a specific payment amount.

This code . . .

<script type="text/javascript" id="clearent-hpp" src="https://hpp-sb.clearent.net/js/clearent.js"></script> <script> Clearent.payButton({"pk":"307a301406072a864.....8ce3d076fde833c136b", "amount": "64.50"}); </script>

Produces a "Pay Now" button on the page (the "Pay Now" text is configurable)

That when clicked produces this popup:

Flexible Configuration

Configuration options can be grouped together when calling the payButton() method or added separately. The following are all equivalent:

<script> Clearent.setProperty("pk", "307a301406072a864.....8ce3d076fde833c136b"); Clearent.setProperty("heading-text", "Complete payment details below"); Clearent.setProperty("show-billing-address", true); Clearent.payButton({"amount": "64.50"}); </script> <script> Clearent.setProperty("pk", "307a301406072a864.....8ce3d076fde833c136b"); Clearent.setProperty("heading-text", "Complete payment details below"); Clearent.setProperty("show-billing-address", true); Clearent.setProperty("amount", "64.50"); Clearent.payButton(); </script> <script> Clearent.payButton({ "pk": "307a301406072a864.....8ce3d076fde833c136b", "heading-text": "Complete payment details below", "show-billing-address": true, "amount": "64.50" }); </script>

Configuring Optional Billing Address and Heading Text

As you saw in the configuration page there are many options that can be configured. Below we are adding an optional billing address and changing the heading text of the popup.

<script> Clearent.setProperty("pk", "307a301406072a864.....8ce3d076fde833c136b"); Clearent.setProperty("heading-text", "Complete payment details below"); Clearent.setProperty("show-billing-address", true); Clearent.payButton({"amount": "64.50"}); </script>

The Hosted Payment Page is responsive and designed use the screen efficiently. The same screen as above but viewed on a larger, non-mobile screen:

Using Card Tokens

Performing a sale transaction and saving card for future use.

By setting the "show-save-card-option", your customers can save their card data securely in our vault. A token is returned from the sale request that can be stored on your servers without storing sensitive card data.

<script> Clearent.setProperty("pk", "307a301406072a864.....8ce3d076fde833c136b"); Clearent.setProperty("show-save-card-option", true); Clearent.payButton({"amount": "64.50"}); </script>

Your customer would then have the option of saving their card information for future purchases.

They can even save a meaningful name for their card:

Performing a token-only request.

Depending on how your site is designed, you may have a need to save a card token without doing a sale.

This code . . .

<script> Clearent.payButton({"pk": "307a301406072a864.....8ce3d076fde833c136b", "card-token-only": true, "heading-text": "Enter card information below", "card-acceptance-label": "" }); </script>

Produces an "Add payment method" button on the page (the "Add payment method" text is configurable)

That when clicked produces this popup:

Using card tokens.

The next time the customer logs into your site, you can provide saved payment methods to make the checkout process even easier. You simply provide the token, card type, and description that was returned from the token-only request or the token returned from the sale with card card option request.

<script> function ClearentOnSuccess(responseRaw,ResponseJSON){ // if you set the card-token-only option on your page you can get the // token information back like this if(ResponseJSON.payload && ResponseJSON.payload.tokenResponse){ var tokenResponse = ResponseJSON.payload.tokenResponse; console.log('token-id = ' + tokenResponse['token-id']); console.log('token card-type = ' + tokenResponse['card-type']); console.log('token description = ' + tokenResponse['description']); } // if you set the show-save-card-option on your page AND the user chose // to save their card you can get the token information back like this if(ResponseJSON.links){ var links = ResponseJSON.links; for (var i= 0;i<links.length;i++){ if(links[i]['rel'] == "token"){ console.log('token-id = ' + links[i]['id']); } } } } </script>

The next time the customer logs into your site, you can provide saved payment methods using the Clearent.addToken() method to make the checkout process even easier. You simply provide the token, card type, and description that was returned from the token-only request or the token returned from the sale with card card option request.

<script> Clearent.setProperty("pk", "307a301406072a864.....8ce3d076fde833c136b"); Clearent.addToken({"token":"1100005218649761111","cardType":"VISA"}); Clearent.addToken({"token":"1312451222335452217","cardType":"MasterCard"}); Clearent.addToken({"token":"1142451131215453214","description":"Vacation card"}); Clearent.addToken({"token":"1412451141215454218","cardType":"Visa","description":"Business travel card"}); Clearent.addToken({"token":"1512451151215455211"}); Clearent.addToken({"token":"1612451161215456216"}); Clearent.payButton({"amount": "64.50"}); </script>

The saved cards are presented to the user in a dropdown list:

Ready to try some examples on your own? Visit our live demo page and try out your own examples!