Frontend
Backend

Prebuilt Checkout page

Explore a full, working code sample of an integration with Smartpay Checkout. The client and server-side code redirects to a prebuilt payment page hosted by Smartpay.

Prerequisites

Make sure you have the API credentials(public key & secret key) from Smartpay before you can have a working integration. You can find your credentials at the settings > credentials page on your dashboard.

If you would like to know how Smartpay payment works, please see the payment flow for more details.

1. Set up the server

Install the Smartpay library

Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a package.json file, download the project files.

yarn add @smartpay/sdk-node
or
npm install --save @smartpay/sdk-node

Create a Checkout Session

Add an endpoint on your server that creates a Checkout Session. A Checkout Session controls what your customer sees in the Smartpay-hosted payment page such as line items, the order amount, and currency.

Define the line items

Always keep sensitive information about your product inventory, like price and availability, on your server to prevent customer manipulation from the client. Define product information when you create the Checkout Session.

Supply success and cancel URLs

Specify the URLs Smartpay should redirect to when your customer completes or cancels the Checkout Session. You can handle both the success and canceled states with the same URL.

Redirect to Checkout

After creating the session, redirect your customer to the Checkout page's URL returned in the response.

2. Build your checkout

Add a checkout button

Add a button to your page. When your customer clicks this button, they are redirected to the Smartpay-hosted payment form.

3. Test your page

Test account

We aim to provide the smoothest developer experience, hence we make it straightforward for you to test your integration.

Please use your test keys to run your integration which ensures the payment is not processed by card networks or payment providers. Once Smartpay checkout is launched, all you need to do is to use any email with a +test suffix, e.g. hello+test@smartpay.co to sign up, and it will immediately be regarded as a test account. It enables you to feel safe working on the integration without having to worry about actually being charged.

Your test Smartpay account will come with pre-configured card numbers so you can test all the different outcomes:

  • Success: 4242 4242 4242 4242
  • Hard decline: 4100 0000 0000 0019
  • Soft decline: 4000 0000 0000 0119

Congratulations!

You have a basic Checkout integration working.

Check on your dashboard if your account is activated (if not please contact us and let us know you are ready to go live). Once your account is activated you can see live credentials at the settings > credentials page on your dashboard. Please follow our go live checklist to ensure a smooth transition when taking your integration live.

1const path = require('path');
2const cors = require('cors');
3const express = require('express');
4
5const Smartpay = require('@smartpay/sdk-node').default; // The Nodejs SDK
6
7// Replace the keys with yours
8const SECRET_KEY = process.env.SECRET_KEY || '<YOUR_SECRET_KEY>';
9const PUBLIC_KEY = process.env.PUBLIC_KEY || '<YOUR_PUBLIC_KEY>';
10
11const smartpay = new Smartpay(SECRET_KEY, {
12  publicKey: PUBLIC_KEY,
13});
14
15const app = express();
16const root = path.join(__dirname, '..', 'client', 'build');
17
18app.use(express.static(root));
19app.use(express.json());
20app.use(cors());
21
22app.get('/', async (req, res) => {
23  res.redirect('http://localhost:3080');
24});
25
26app.post('/create-smartpay-checkout', async (req, res) => {
27  const CALLBACK_URL_PREFIX = req.headers.referer;
28
29  // Generate the payload for checkout session
30  const payload = {
31    amount: 400,
32    currency: 'JPY',
33    items: [
34      {
35        name: 'オリジナルス STAN SMITH',
36        amount: 250,
37        currency: 'JPY',
38        quantity: 1,
39      },
40    ],
41    customerInfo: {
42      accountAge: 35,
43      email: 'merchant-support@smartpay.co',
44      firstName: 'かおる',
45      lastName: '田中',
46      firstNameKana: 'カオル',
47      lastNameKana: 'タナカ',
48      address: {
49        line1: '北青山 3-6-7',
50        line2: '青山パラシオタワー 11階',
51        subLocality: '',
52        locality: '港区',
53        administrativeArea: '東京都',
54        postalCode: '107-0061',
55        country: 'JP',
56      },
57      dateOfBirth: '1970-06-30',
58      gender: 'male',
59    },
60    shippingInfo: {
61      address: {
62        line1: '北青山 3-6-7',
63        line2: '青山パラシオタワー 11階',
64        subLocality: '',
65        locality: '港区',
66        administrativeArea: '東京都',
67        postalCode: '107-0061',
68        country: 'JP',
69      },
70      feeAmount: 150,
71      feeCurrency: 'JPY',
72    },
73    // Your internal reference of the order
74    reference: 'order_ref_1234567',
75    // Callback URLs
76    successUrl: 'https://docs.smartpay.co/example-pages/checkout-successful',
77    cancelUrl: 'https://docs.smartpay.co/example-pages/checkout-canceled',
78  };
79
80  const session = await smartpay.createCheckoutSession(payload);
81
82  res.redirect(303, session.url);
83});
84
85/**
86 * Handle callbacks
87 */
88app.get('/payment-success', async (req, res) => {
89  res.sendFile('payment-success.html', { root });
90});
91
92app.get('/payment-canceled', async (req, res) => {
93  res.sendFile('payment-canceled.html', { root });
94});
95
96app.listen(5001, '127.0.0.1', () =>
97  console.log('Node server listening on port 5001!')
98);
99