# One Time Charges
There are two ways to accept payments on your site with paysly:
# Using a Checkout Flow
A pre-built checkout flow is the easiest way to accept payments on your website using paysly.
First, install the paysly package using your package manager of choice:
# npm
npm install paysly
2
# yarn
yarn add paysly
2
Then on the page you would like to accept payments, initialize it:
const Paysly = require('paysly');
// replace 'pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5' with your public key
// from the paysly dashboard
const paysly = await Paysly('pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5');
2
3
4
or:
const Paysly = require('paysly');
// replace 'pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5' with your public key
// from the paysly dashboard
Paysly('pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5').then((paysly) => {
// your code here
});
2
3
4
5
6
note
You may notice that the paysly package is initialized asynchronously. This is done to optimize page render time, so your page can continue to load while paysly is initializing.
After initialization, call the redirectToCheckout function when you are ready to collect payment from your customer:
paysly.redirectToCheckout({
payment_method_types: ['card'],
line_items: [
{
name: 'T-shirt',
description: 'Comfortable cotton t-shirt',
images: ['https://example.com/t-shirt.png'],
amount: 1000,
currency: 'usd',
quantity: 1,
},
],
success_url: 'https://example.com/success',
cancel_url: 'https://example.com/cancel',
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
This method takes an object with an array of line_items to control how the customer is charged. This object is a stripe session object, which you can customize to suit your needs.
And thats it! If users complete payment, they will be redirected to the page you specified in success_url - if they cancel or the payment fails, they will be sent to the supplied cancel_url.
If you want to perform automated logic based on the payment, you can verify the payment on your success page.
# Using Stripe Elements
# Initialize Elements
Because Paysly is built on Stripe, we support Stripe's awesome elements framework.
The Paysly package exposes the elements framework for you. So, just as you would with the checkout flow, install the package:
npm install paysly
# or
yarn add paysly
2
3
and initialize:
const Paysly = require('paysly');
// replace 'pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5' with your public key
// from the paysly dashboard
const paysly = await Paysly('pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5');
// or
Paysly('pk_test_yourPublicKey-I3gcWtGXPuyWFRk2YD5').then((paysly) => {
// your code here
});
2
3
4
5
6
7
8
Then, create an elements instance using paysly:
var elements = paysly.elements();
elements
This elements instance is a full copy of the Stripe elements object. With it, you can do anything that you can do with the Stripe elements object. The rest of this guide exemplifies a basic flow, but you can also create an element however you would like. Stripe provides several examples to help you get started. When you are ready, pass your element to paysly to create the charge.
To display an element on your site, set up the html containers:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Style the element as you would like:
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Finally, create your element using javascript:
// Custom styling can be passed to options when creating an Element.
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Finally, when your customer submits the form, create the charge.
# Creating a Charge
Creating a charge is done in a single function call:
// Handle form submission.
const form = document.getElementById('payment-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
paysly.createCharge(
card,
{},
{ currency: 'usd', amount: 500 }
).then((result) => {
// handle result
}).catch((result) => {
// handle validation or charge errors
});
});
2
3
4
5
6
7
8
9
10
11
12
13
14
The paysly.createCharge function takes three parameters:
- a Stripe elements card element (described above)
- token data (pass in
{}if you don't need to use any token data, as done in the example above) - a charge configuration object, which accepts all stripe charge creation arguments
createCharge also returns a promise. You can perform simple UI updates by handling the resolution result, or display errors by handling it's rejection. If you wish to perform business logic based on the result of the payment you can verify the payment in your success handler.