Save Australia BECS Direct Debit details for future payments

Server-side

This integration requires endpoints on your server that talk to the Stripe API. Use our official libraries for access to the Stripe API from your server:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Client-side

The React Native SDK is open source and fully documented. Internally, it uses the native iOS and Android SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use):

yarn add @stripe/stripe-react-native

Next, install some other necessary dependencies:

• For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
• For Android, there are no more dependencies to install.

Stripe initialization

To initialize Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialization method. Only the API publishable key in publishableKey is required. The following example shows how to initialize Stripe using the StripeProvider component.

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

To reuse a BECS Direct Debit account for future payments, you must attach it to a Customer.

Create a Customer object when your customer creates an account with your business. Associating the ID of the Customer object with your own internal representation of them enables you to retrieve and use the stored payment method details later.

Create a new Customer or retrieve an existing Customer to associate with this payment. Include the following code on your server to create a new Customer.

curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

You can securely collect Australia BECS Direct Debit payment information with AuBECSDebitForm, a drop-in UI component provided by the SDK. AuBECSDebitForm provides a UI for customers to enter their name, email, BSB number, and account number in addition to displaying the Australia BECS Direct Debit Terms.

Add an AuBECSDebitForm component to the screen with your company name as a prop. You can also customize AuBECSDebitForm to match the look and feel of your app by providing the formStyle prop. Collect form details with the onComplete prop.

function BECSSetupFuturePaymentScreen() {
  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Save" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Server-side

A SetupIntent is an object that represents your intent to set up a customer’s payment method for future payments. The SetupIntent will track the steps of this set-up process. For BECS Direct Debit, this includes collecting a mandate from the customer and tracking its validity throughout its lifecycle.

Create a SetupIntent on your server with payment_method_types set to au_becs_debit and specify the Customer’s id:

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"="au_becs_debit" \
  -d "customer"="{{CUSTOMER_ID}}"

After creating a SetupIntent on your server, you can associate the SetupIntent ID with the current session’s customer in your application’s data model. Doing so allows you to retrieve the information after you have successfully collected a payment method.

The returned SetupIntent object contains a client_secret property. Pass the client secret to the client-side application to continue with the setup process.

Client-side

On the client, request a SetupIntent from your server and store its client secret.

const fetchSetupIntentClientSecret = async (customerEmail: string) => {
  const response = await fetch(`${API_URL}/create-setup-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: customerEmail,
      payment_method_types: ['au_becs_debit'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

Retrieve the client secret from the SetupIntent you created and call confirmSetupIntent. This presents a webview where the customer can complete the setup on their bank’s website or app.

function BECSSetupFuturePaymentScreen() {
  const { confirmSetupIntent } = useConfirmSetupIntent();

  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  const handlePayPress = async () => {
    const { error, setupIntent } = await confirmSetupIntent(clientSecret, {
      paymentMethodType: 'AuBecsDebit',
      paymentMethodData: {
        formDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Setup intent confirmation error', error.message);
    } else if (setupIntent) {
      Alert.alert(
        `Success: Setup intent created. Intent status: ${setupIntent.status}`
      );
    }
  };

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Save" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Test your form using the test BSB number 000000 and one of the test account numbers below when you call confirmSetupIntent.