Accept a PayNow payment

Accept payments with PayNow, a funds transfer service popular in Singapore.

PayNow is a single-use payment method. Customers use their preferred app from participating banks and participating non-bank financial institutions to scan the QR code presented to them in the checkout flow and complete the payment.

Set up Stripe

First, you need a Stripe account. Register now.

Use our official libraries for access to the Stripe API from your application:

Create a PaymentIntent
Server-side

A PaymentIntent is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. First, create a PaymentIntent on your server and specify the amount to collect and the currency. If you already have an integration using the Payment Intents API, add paynow to the list of payment method types for your PaymentIntent.

Retrieve the client secret

The PaymentIntent includes a client secret that the client side uses to securely complete the payment process. You can use different approaches to pass the client secret to the client side.

Retrieve the client secret from an endpoint on your server, using the browser’s fetch function. This approach is best if your client side is a single-page application, particularly one built with a modern frontend framework like React. Create the server endpoint that serves the client secret:

And then fetch the client secret with JavaScript on the client side:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Display the PayNow QR Code
Client-side

In this step, you’ll complete PayNow payments on the client with Stripe.js. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file.

checkout.html
HTML
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Create an instance of Stripe.js with the following JavaScript on your checkout page.

client.js
JavaScript
// Set your publishable key. Remember to change this to your live publishable key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Use stripe.confirmPayNowPayment to confirm the payment on the client side.

client.js
JavaScript
var form = document.getElementById('payment-form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  // Set the clientSecret here you got in Step 2
  stripe.confirmPayNowPayment(
    clientSecret,
  ).then((res) => {
    if(res.paymentIntent.status === 'succeeded') {
      // The user scanned the QR code
    } else {
      // The user closed the modal, cancelling payment
    }
  });
});

After you call confirmPayNowPayment, the webpage displays a QR code. Your customers can scan the QR code and authenticate the payment using their preferred banking app or payment app. You should remain on the page with the QR code until Stripe fulfills the order and you know the outcome of the payment.

Fulfill the order
Server-side

Use a method such as webhooks to handle order fulfillment, instead of relying on your customer to return to the payment status page. When a customer completes payment, the PaymentIntent transitions to succeeded and emits the payment_intent.succeeded webhook event.

Test your integration

While testing, you can scan the QR code with a QR code scanning application on your mobile device. The QR code payload contains a URL that redirects you to a Stripe-hosted PayNow test payment page where you can either authorize or fail the test payment.

In live mode, you can scan the QR code using an app from participating banks and participating non-bank financial institutions.

Notiz