Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe Google Pay page consists of 3 parts:
To identify a payment, CCV Pay presents information about the merchant and provided by the merchant to the customer. Placeholders in HTML define places to insert the payment information into the page upon loading. For the card payment page the following placeholders exist:
Placeholder | Description |
---|---|
{{merchant}} |
the name of the merchant as boarded by CCV |
{{price}} |
the amount and currency as provided in the API request |
{{merchantOrderReference}} |
the value as provided in the API request |
{{description}} |
the value as provided in the API request |
{{{paymentForm}}} |
the Payment Form Template HTML. See Payment Form Template HTML |
translate
attribute and add the translation to the template itself.id
: it must be present on all elements that contain an id
in the template{{merchant}}
: it must be present to identify the payee of the transaction{{{paymentForm}}}
: it must be present if you do not change the Payment Form Template<div class="col-md-12">
<h3 id="order-data" class="text-center" translate="ORDER_DATA"/>
<div class="row">
<table class="col-xs-12 col-sm-12 col-md-12">
<tbody>
<tr>
<td class="col-xs-3 col-sm-6 col-md-6 text-right">
<p translate="SELLER"/>
<p id="price-label" translate="PRICE"/>
<p translate="REFERENCE"/>
<p translate="DESCRIPTION"/>
</td>
<td class="border-right no-padding"></td>
<td class="col-xs-9 col-sm-6 col-md-6">
<p>{{merchant}}</p>
<p id="price-value">{{price}}</p>
<p>{{merchantOrderReference}}</p>
<p>{{description}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{{{paymentForm}}}
<div class="payment-footer col-md-12 text-center">
<a id="cancel-payment" href="" translate="CANCEL_PAYMENT"/>
<div class="clearfix"></div>
<img src="img/ccv-payment-logo.svg" alt="CCVPayment Logo"/>
</div>
The payment form contains the Google Pay button.
The payment form supports mobile devices providing a mobile friendly input form.
<div class="col-md-6 col-md-offset-3 content-middle">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<div id="google-pay-payment-form" class="content-tile">
<div class="google-pay-payment-form">
<div class="google-pay-button-container"></div>
</div>
</div>
</div>
</div>
</div>