@paydock/client-sdk
Version:
Paydock client sdk
232 lines (196 loc) • 6.53 kB
Markdown
# Click To Pay
## Overview
Integrate with Click To Pay using Paydock's Click To Pay widget.
For a full description of the methods and parameters, reference the [README file](https://www.npmjs.com/package/@paydock/client-sdk#ClickToPay).
## Click To Pay simple example
The following section provides an example use case and integration for the widget.
### Create a Container
To integrate the Click To Pay checkout iFrame, create a container in your HTML code. This container serves as the placeholder for the iFrame.
```html
<div id="checkoutIframe"></div>
```
### Initialize the Widget
Use the following code to initialize your widget:
```javascript
var src = new paydock.ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key_or_access_token",
{}, // meta
);
src.load();
```
```javascript
// ES2015 | TypeScript
import { ClickToPay } from '@paydock/client-sdk';
var src = new ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key_or_access_token",
{}, // meta
);
src.load();
```
*NOTE:* Paydock recommends that you use a Paydock Access Token instead of a public key for security reasons in production environments. When creating your access token, you must enable the `Secure Remote Commerce` and add a whitelist for the domain of your checkout screen.
### Full example
A full example of the container and the initialized widget is as follows:
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>iframe {border: 0;width: 40%;height: 300px;}</style>
</head>
<body>
<div id="checkoutIframe"></div>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
var src = new paydock.ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key_or_access_token",
{},
);
src.load();
</script>
</body>
</html>
```
## Customize your Click To Pay Checkout
The following is an advanced example that includes customization. You can use these methods to enhance your checkout experience.
### Settings
```javascript
src.setEnv('sandbox'); // set environment
src.hideCheckout(); // hide checkout iframe
src.showCheckout(); // show checkout iframe
src.on('iframeLoaded', () => {
console.log("Initial iframe loaded");
});
src.on('checkoutReady', () => {
console.log("Checkout ready to be used");
});
src.on('checkoutCompleted', (token) => {
console.log(token);
});
src.on('checkoutError', (error) => {
console.log(error);
});
```
### Full example
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>iframe {border: 0;width: 40%;height: 450px;}</style>
</head>
<body>
<div id="checkoutIframe"></div>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
var src = new paydock.ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key_or_access_token",
{},
);
src.on('iframeLoaded', () => {
console.log("Initial iframe loaded");
});
src.on('checkoutReady', () => {
console.log("Checkout ready to be used");
});
src.on('checkoutCompleted', (token) => {
console.log(token);
});
src.on('checkoutError', (error) => {
console.log(error);
});
src.load();
</script>
</body>
</html>
```
## Customize your billing address fields
To customize your billing address experience, Paydock uses a flag that manages whether a customer's billing address is mandatory.
The options for this customization are NONE (default option), and POSTAL_COUNTRY or FULL.
```
var src = new paydock.ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key_or_access_token",
{
"dpa_transaction_options": {
"dpa_billing_preference": "FULL"
}
},
);
```
The Click To Pay checkout in the example requires the billing address from the customer, which is then returned as a part of the checkout data. The data is then stored and leveraged in the Paydock charge.
You can also provide the billing address at the time of creating the charge. For example, if you have a different method for collecting the billing address, such as outside of the Click To Pay checkout, you can provide it alongside other information at the charge creation step:
1. Disable the billing address in Paydock's Click To Pay widget.
2. Get your One Time Token from the Click To Pay widget alongside other details that may have been collected outside the Click To Pay checkout as the shipping address.
3. Send the billing address when creating the charge.
```
POST v1/charges
{
"amount": "10.00",
"currency": "AUD",
"token": "one_time_token",
"customer": {
"payment_source": {
"gateway_id": "gateway_id",
"address_line1": "address_line1",
"address_line2": "address_line2",
"address_city": "address_city",
"address_postcode": "address_postcode",
"address_state": "address_state",
"address_country": "address_country"
}
},
"shipping": {
"address_line1": "address_line1",
"address_line2": "address_line2",
"address_line3": "address_line3",
"address_city": "address_city",
"address_postcode": "address_postcode",
"address_state": "address_state",
"address_country": "address_country"
}
}
```
## How to customize accepted cards
You can send a flag `unaccepted_card_type` to block the usage of a specific card type. The available options are 'DEBIT' and 'CREDIT'.
### Example code
The following example demonstrates how to block the card:
```
var src = new paydock.ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key",
{
unaccepted_card_type: 'DEBIT'
},
);
```
## Personalize the Style
Customize the look and feel of your UI. The following example demonstrates changes in the styling of the buttons.
### Example code
```
var src = new paydock.ClickToPay(
"#checkoutIframe",
"service_id",
"paydock_public_key",
{},
);
src.setStyles({
enable_src_popup: true,
primary_button_color: 'red',
secondary_button_color: 'red',
primary_button_text_color: 'red',
secondary_button_text_color: 'red',
font_family: 'Arial',
});
```